1. ホーム
  2. 質問と答え
  3. ブートストラップのjquery rangeスライダーの開始位置をリセットする方法は？

ブートストラップのjquery rangeスライダーの開始位置をリセットする方法は？

2016-04-12 6 views
1

クリックボタンでスライダーの開始位置を設定したい。ブートストラップのjquery rangeスライダーの開始位置をリセットする方法は？

enter image description here

私はこの方法を使ってみたが、それに変更はありません。

私のフルコードです。 

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="bootstrap-slider.min.css"> 

    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="modernizr.js"></script> 
    <script type="text/javascript" src="bootstrap-slider.min.js"></script> 

    <style type='text/css'> 
     .well { 
      background-color: #E0E0E0; 
     } 
     .slider-example { 
      padding: 10px 0; 
      margin: 35px 0; 
     } 
    </style> 

</head> 
<body> 
    <div class="slider-example"> 
     <div class="well"> 
      <span id="ex18-label-1" class="hidden">Example slider label</span> 
      <input id="ex19" type="text" 
      data-provide="slider" 
      data-slider-ticks="[1, 2, 3]" 
      data-slider-ticks-labels='["short", "medium", "long"]' 
      data-slider-min="1" 
      data-slider-max="3" 
      data-slider-step="1" 
      data-slider-value="3" 
      data-slider-min="0" 
      data-slider-tooltip="hide" /> 

     </div> 
    <button id="start" class=''>Set</button> 
    </div> 


</body> 
<script type="text/javascript"> 
     $("#start").click(function(e) { 

      // what i have try is for reset 

      $("#ex19").slider({ min: 0, value: 0, focus: true }) 

}); 
    </script> 
</html>

iは、このリンク（ http://www.jqueryrain.com/?1RE1sMzh）例えば19

を踏襲し、開始時に設定ボタンの位置にユーザーのクリック（短い）好きなときに私はこのような出力をしたいです。 enter image description here

出典

2016-04-12 samir sheikh

答えて

1

これを試してください： -

$("#start").click(function(e) { 
    var minval = $("#ex19").data('slider').min; //store slider min value 
    $("#ex19").slider('setValue', minval); //set value of slider 
    //other logic 
});

出典

2016-04-12 09:49:07

+1

おかげで、それが働いている男。 –

 関連する問題

  • 関連する問題はありません^_^