时间戳

首页 > 解决方案 > 具有固定值和关联文本输出的 jQuery Range Slider

javascript - 具有固定值和关联文本输出的 jQuery Range Slider

问题描述

我是新来的..对不起我的英语不好：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

标签： javascriptjqueryjquery-uijquery-ui-slider

解决方案

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

$(document).ready(function() {
  var valMap = ["6 (Six)", "10 (Ten)", "12 (Twelve)", "18 (Eighteen)", "35 (Thirty Five)", "56 (Fifty Six)"];
  $("#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>

当滑块从 移动0到 时5，该值将用作valMap数组的索引。

更新

如果你想显示文本，你只需要更新数组，让它有文本，而不仅仅是数字。

推荐阅读