Jquery ui slider step 0.5

时间:2015-12-19 02:50:30

标签: javascript jquery

我遇到了以下代码的问题。它在这里和小提琴上工作但在我的页面上,当我将select更改为4,6,8时,我得到滑块移动但是当我选择4.5,5.5,7.5时,我得到:未捕获错误:语法错误,无法识别的表达式:option [value = 1.5] 。我该如何解决?



$(".needSlider").each(function() {
   var select = $(this);
    var slider = $("#slider").slider({
      min: 1,
      max: 199,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    select.change(function() {
      slider.slider("value", this.selectedIndex + 1);
   });
});

$(".needSlider1").each(function() {
      var select = $(this);
      var slider = $("#slider1").slider({
      value: select.val(),
      min: 1,
      max: 99,
      step: 1,
      range: "min",
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    select.change(function() {
      slider.slider('value', this.selectedIndex + 1);
   });
});

$(".needSlider2").each(function() {
   var select = $(this);
    var slider = $("#slider2").slider({
      min: 1,
      max: 99,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    select.change(function() {
      slider.slider("value", this.selectedIndex + 1);
   });
});

$(".needSlider3").each(function() {
   var select = $(this);
    var slider = $("#slider3").slider({
      min: 1,
      max: 99,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    select.change(function() {
      slider.slider("value", this.selectedIndex + 1);
   });
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<select class="needSlider1" id="minbeds1" name="fun" class="form-text" style="padding-right:0;" >  
 <option value="1">1</option>   
                                <option value="1.5">1.5</option>
                                   
                                <option value="2">2</option>
                                   
                                <option value="2.5">2.5</option>
                                   
                                <option value="3">3</option>
                                   
                                <option value="3.5">3.5</option>
                                   
                                <option value="4">4</option>
                                   
                                <option value="4.5">4.5</option>
                                   
                                <option value="5">5</option>
                                   
                                <option value="5.5">5.5</option>
                                   
                                <option value="6">6</option>
                                   
                                <option value="6.5">6.5</option>
                                   
                                <option value="7">7</option>
                                   
                                <option value="7.5">7.5</option>
                                   
                                <option value="8">8</option>
                                   
                                <option value="8.5">8.5</option>
                                   
                                <option value="9">9</option>
                                   
                                <option value="9.5">9.5</option>
                                   
                                <option value="10">10</option>
                                   
                                <option value="10.5">10.5</option>
                                   
                                <option value="11">11</option>
                                   
                                <option value="11.5">11.5</option>
                                   
                                <option value="12">12</option>
                                   
                                <option value="12.5">12.5</option>
                                   
                                <option value="13">13</option>
                                   
                                <option value="13.5">13.5</option>
                                   
                                <option value="14">14</option>
                                   
                                <option value="14.5">14.5</option>
                                   
                                <option value="15">15</option>
                                   
                                <option value="15.5">15.5</option>
                                   
                                <option value="16">16</option>
                                   
                                <option value="16.5">16.5</option>
                                   
                                <option value="17">17</option>
                                   
                                <option value="17.5">17.5</option>
                                   
                                <option value="18">18</option>
                                   
                                <option value="18.5">18.5</option>
                                   
                                <option value="19">19</option>
                                   
                                <option value="19.5">19.5</option>
                                   
                                <option value="20">20</option>
                                   
                                <option value="20.5">20.5</option>
                                   
                                <option value="21">21</option>
                                   
                                <option value="21.5">21.5</option>
                                   
                                <option value="22">22</option>
                                   
                                <option value="22.5">22.5</option>
                                   
                                <option value="23">23</option>
                                   
                                <option value="23.5">23.5</option>
                                   
                                <option value="24">24</option>
                                   
                                <option value="24.5">24.5</option>
                                   
                                <option value="25">25</option>
                                   
                                <option value="25.5">25.5</option>
                                   
                                <option value="26">26</option>
                                   
                                <option value="26.5">26.5</option>
                                   
                                <option value="27">27</option>
                                   
                                <option value="27.5">27.5</option>
                                   
                                <option value="28">28</option>
                                   
                                <option value="28.5">28.5</option>
                                   
                                <option value="29">29</option>
                                   
                                <option value="29.5">29.5</option>
                                   
                                <option value="30">30</option>
                                   
                                <option value="30.5">30.5</option>
                                   
                                <option value="31">31</option>
                                   
                                <option value="31.5">31.5</option>
                                   
                                <option value="32">32</option>
                                   
                                <option value="32.5">32.5</option>
                                   
                                <option value="33">33</option>
                                   
                                <option value="33.5">33.5</option>
                                   
                                <option value="34">34</option>
                                   
                                <option value="34.5">34.5</option>
                                   
                            
                                              
</select>
<div id="slider1"></div>

<select class="needSlider" id="minbeds" name="przebieg" class="form-text" style="padding-right:0;">  <option value="5000">5000</option>
                                   
                                <option value="10000">10000</option>
                                   
                                <option value="15000">15000</option>
                                   
                                <option value="20000">20000</option>
                                   
                                <option value="25000">25000</option>
                                   
                                <option value="30000">30000</option>
                                   
                                <option value="35000">35000</option>
                                   
                                <option value="40000">40000</option>
                                   
                                <option value="45000">45000</option>
                                   
                                <option value="50000">50000</option>
                                   
                                <option value="55000">55000</option>
                                   
                                <option value="60000">60000</option>
                                   
                                <option value="65000">65000</option>
                                   
                                <option value="70000">70000</option>
                                   
                                <option value="75000">75000</option>
                                   
                                <option value="80000">80000</option>
                                   
                                <option value="85000">85000</option>
                                   
                                <option value="90000">90000</option>
                                   
                                <option value="95000">95000</option>
                                   
                                <option value="100000">100000</option>
                                   
                                <option value="105000">105000</option>
                                   
                                <option value="110000">110000</option>
                                   
                                <option value="115000">115000</option>
                                   
                                <option value="120000">120000</option>
                                   
                                <option value="125000">125000</option>
                                   
                                <option value="130000">130000</option>
                                   
                                <option value="135000">135000</option>
                                   
                                <option value="140000">140000</option>
                                   
                                <option value="145000">145000</option>
                                   
                                <option value="150000">150000</option>
                                   
                                <option value="155000">155000</option>
                                   
                                <option value="160000">160000</option>
                                   
                                <option value="165000">165000</option>
                                   
                                <option value="170000">170000</option>
                                   
                                <option value="175000">175000</option>
                                   
                                <option value="180000">180000</option>
                                   
                                <option value="185000">185000</option>

  </select>
  <div id="slider"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

$( "#slider-range-min" ).slider({
    range: "min",
    step: 0.01,
    value: 37.09,
    min: 0.01,
    max: 700.99,
    slide: function( event, ui ) {
        $("#amount").val("$" + ui.value.toFixed(2));
    }
});
$("#amount").val("$" + $("#slider-range-min").slider("value").toFixed(2));

这回答你的小数问题:)如果你将.toFixed(2)更改为.toFixed(3),它将显示3个小数点。