javascript - jquery-ui slider 限制为使用大于 100 的数字选择列表奇怪的行为

Question

可能是有史以来最愚蠢的问题，但这确实很烦人，代码编译得很好，并且在数字 0 到 100 的范围内工作得很好，但是，我无法弄清楚为什么当我使用大于 100 的数字时我的 slider 控件停止工作.. .我正在使用简单的jquery-ui sample

一切看起来都不错，但是一旦更改的数字大于 100(由于我们的要求，我们希望使用它多年)，选择列表就会停止更改日期并且 slider 不会移动...它支持数字吗大于 100 还是有一些限制？!我正在使用的js代码:

$(function() {
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
  min: 100,
  max: 1000,
  step: 100,
  range: "min",
create: function( event, ui ) {
  setSliderTicks(event.target);
},
  value: select[ 0 ].selectedIndex + 1,
  slide: function( event, ui ) {
    select[ 0 ].selectedIndex = ui.value - 1;
  }
});
$( "#minbeds" ).change(function() {
  slider.slider( "value", this.selectedIndex + 1 );
});
});


function setSliderTicks(el) {
var $slider =  $(el);
var max =  $slider.slider("option", "max");    
var min =  $slider.slider("option", "min");    
var spacing =  100 / (max - min);

$slider.find('.ui-slider-tick-mark').remove();
for (var i = 0; i < max-min ; i++) {
    $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
 }
 }

这是 HTML:

<form id="reservation">
<select name="minbeds" id="minbeds">
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
<option>700</option>
<option>800</option>
<option>900</option>
<option>1000</option>
</select>
</form>

还有一些刻度线的 CSS 样式:

.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:grey;
height:16px;
position:absolute;
top:-1px;
}

任何人都可以告诉我，它有什么问题，如果有一些限制，任何人都可以推荐我使用其他一些库(开源)，具有相同的功能，从 html 获取输入(选择列表)并带有可用的刻度线/标签？!任何帮助表示赞赏!谢谢。

Answer 1

问题在于，您只是简单地复制粘贴示例并期望它能够工作，而不了解它是如何工作的，即使您有不同的要求。

该演示直接使用 selectedIndex 属性，因为值的范围为 1-6，并且 slider 步进为 1。您的值和步骤是不同的，因此如果您想找到按索引选择的选项，您应该将 slider 值除以步骤值 100 并减去 1(因为选项索引是从 0 开始的)。同样，如果您想根据所选选项索引设置 slider 值，则应将其增加 1 并乘以 100。

您可以直接使用选定的选项值和 slider 值，而不是执行所有操作，如下所示:

$(function() {
  var select = $("#minbeds");
  var slider = $("<div id='slider'></div>").insertAfter(select).slider({
    min: 100,
    max: 1000,
    step: 100,
    range: "min",
    value: 100,
    slide: function(event, ui) {
      select.val(ui.value);
    }
  });
  $("#minbeds").change(function() {
    slider.slider("value", this.value);
  });
});

<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="reservation">
  <select name="minbeds" id="minbeds">
    <option>100</option>
    <option>200</option>
    <option>300</option>
    <option>400</option>
    <option>500</option>
    <option>600</option>
    <option>700</option>
    <option>800</option>
    <option>900</option>
    <option>1000</option>
  </select>
</form>