新しい値をブートストラップスライダーバーに設定する

Question

私はbootstrap-sliderバーに新しい値を設定するのに苦労しています。テキストボックスとスライダーバーで双方向バインドを作成したいので、スライダーやテキストの値を変更するとテキストボックスの値が変更され、反対になります。私は最初の部分を右に持って、スライダの値が変更された場合、私のテキストボックスも変わりますが、スライダにテキストボックスから新しい値を送りたい場合、それは扱いにくく動作しません。

HTML：

<div class="editor-field" style="margin-top: 5px"> 
    <div class="col-sm-6" style="text-align: center"> 
     <label for="price-max" style="margin-right: 10px">Max Price</label> 
     <input type="text" id="price-max" name="price-max" data-number="0"> 
    </div> 
    <div class="col-sm-6" style="text-align: center"> 
     <label for="price-min" style="margin-left: 15px">Min Price</label> 
     <input type="text" id="price-min" name="price-min" data-number="0"> 
    </div> 
    <div style="margin-top: 5px; margin-right: 170px"> 
     <input type="text" name="price" id="price"> 
    </div> 
</div> 

Javascriptを：

$(function() { 
      var objectValues = 
       { 
        vArray: [0, 0] 
       }; 


      $("#price").slider({ min: 0, max: 50000000, value: objectValues.vArray, focus: true }); 

      $("#price").change(function() { 
       var sliderArr = $("#price").val().split(','); 

       $("#price-min").val(commafy(sliderArr[0])); 
       $("#price-min").attr('data-number', sliderArr[0]); 
       $("#price-max").val(commafy(sliderArr[1])); 
       $("#price-max").attr('data-number', sliderArr[1]); 

      }); 

      $("#price-min").change(function() { 
       $(this).data('number', $(this).text()); 

       var ownNumber = $(this).data('number'); 
       var external = $("#price-max").data('number'); 

       var _slider = $("#price").slider(); 
      _slider 
       .slider('setValue', ownNumber) 
       .slider('setValue', external); 

      }); 

      $("#price-max").change(function() { 
       $(this).data('number', $(this).text()); 

       var ownNumber = $(this).data('number'); 
       var external = $("#price-min").data('number'); 

       var _slider = $("#price").slider(); 
      _slider 
       .slider('setValue', ownNumber) 
       .slider('setValue', external); 


      }); 
     }); 

     function commafy(num) { 
      var str = num.toString().split('.'); 
      if (str[0].length >= 5) { 
       str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,'); 
      } 
      if (str[1] && str[1].length >= 5) { 
       str[1] = str[1].replace(/(\d{3})/g, '$1 '); 
      } 
      return str.join('.'); 
     } 

と私は受け取っていますエラー：

Uncaught TypeError: Cannot read property 'toFixed' of undefined

Answer 1

と以下のようsetValue以内に、次のとおりです：関数が

ありますが、setValueがここで見つけると呼ばれる

$(function() { 
     var objectValues = 
      { 
       vArray: [0, 0] 
      }; 


     var _slider = $("#price").slider({ min: 0, max: 100000, value: objectValues.vArray, focus: true }); 

     $("#price").change(function() { 
      var sliderArr = $("#price").val().split(','); 

      $("#price-min").val(commafy(sliderArr[0])); 
      $("#price-min").attr('data-number', sliderArr[0]); 
      $("#price-max").val(commafy(sliderArr[1])); 
      $("#price-max").attr('data-number', sliderArr[1]); 

     }); 

     $("#price-min").on("blur change keyup focus leave", function() { 
      var $this = $(this); 
      var val = unCommafy($this.val()); 
      if (val == null || val === undefined || val.length == 0) val = 0; 
      var max = _slider.slider('getValue')[1]; 
      _slider.slider('setValue', [val * 1, max]); 

     }); 

     $("#price-max").on("blur change keyup focus leave", function() { 

      var $this = $(this); 
      var val = unCommafy($this.val()); 
      if (val == null || val === undefined || val.length == 0) val = 0; 
      var min = _slider.slider('getValue')[0]; 
      _slider.slider('setValue', [min, val * 1]); 

      return; 

      $(this).data('number', $(this).text()); 

      var ownNumber = $(this).data('number'); 
      var external = $("#price-min").data('number'); 

      _slider 
       .slider('setValue', ownNumber) 
     }); 
    }); 

    function commafy(num) { 
     var str = num.toString().split('.'); 
     if (str[0].length >= 5) { 
      str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,'); 
     } 
     if (str[1] && str[1].length >= 5) { 
      str[1] = str[1].replace(/(\d{3})/g, '$1 '); 
     } 
     return str.join('.'); 
    } 

    function unCommafy(val) { 
     if (val === undefined || val === null) return ""; 
     val = val + ""; 
     while (val.indexOf(',') > -1) 
      val = val.replace(',', ''); 
     return val; 
    } 

Answer 2

私はここにjsfiddleを作成しました： https://jsfiddle.net/mxmz_/d13cue6z/1/のスクリプトを試してみると、 はありますか？

_slider.slider('setValue', 123); 

ここで、スライダの正当なコマンドであることがわかりましたか？ここでドキュメントをチェックするだけで（http://seiyria.com/bootstrap-slider/）、それに関連するものは何も見つかりませんでした。私は最大値と最小値を検証するために必要なこれを達成するために https://github.com/seiyria/bootstrap-slider/blob/master/dist/bootstrap-slider.js#L870