具有固定值和相关文本输出的jQuery Range Slider

Question

我是新来的。。抱歉我的英语不好：D

我正在寻找具有固定值和附加文本输出的范围滑块。

这里是一个例子：http://james2013.batcave.net/s100.htm

<p>
</p><div id="resolution-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
<div id="resolution"></div>
<div class="resolution-preview">6</div>

<h4>Slider width is set in css for this page</h4>
<script>
$(document).ready(function(){
    var valMap = [6, 10, 12, 18 , 35, 56];
    $("#resolution-slider").slider({
      value: valMap[0],  // Start slider from first (0th) element
      max: valMap.length-1, // Set "max" attribute to array length minus 1
      min: 0,
      values: [0], 
      create: function( event, ui ) {  // Place numeric value on page before slide
      $(".resolution-preview").html(valMap[0]); 
      },
      slide: function(event, ui) {
        $("#resolution").val(valMap[ui.values[0]]); // Fetch selected value from array               
        $(".resolution-preview").html(valMap[ui.values[0]]);
      }  
    });
});
</script>

如果显示数字18，则还必须显示仅适用于该值的文本。

如果选择了不同的数字，则会出现不同的文本。

感谢帮助人员<3

Answer 1

由于您没有使用范围，因此您不需要仅使用1 values来使用value。请考虑以下示例。

$(document).ready(function() {
  var valMap = [6, 10, 12, 18, 35, 56];
  $("#resolution-slider").slider({
    value: 0,
    max: valMap.length - 1,
    min: 0,
    create: function(event, ui) {
      $(".resolution-preview").html(valMap[0]);
    },
    slide: function(event, ui) {
      $(".resolution-preview").html(valMap[ui.value]);
    }
  });
});

#resolution-slider {
  width: 500px;
  margin-left: 50px;
}

.resolution-preview {
  margin-top: 10px;
  margin-left: 50px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p></p>

<div id="resolution-slider"></div>
<div class="resolution-preview">6</div>

<h4>Slider width is set in css for this page</h4>