JQuery UI Slider中的不同值答案

【问题标题】：Different values in JQuery UI SliderJQuery UI Slider中的不同值
【发布时间】：2019-03-08 17:13:18
【问题描述】：

是否可以在 jquery UI 滑块中创建我自己的步骤？例如，我有 5 个步骤：0、1200、2000、2200 和 3000。有人知道该怎么做吗？

const rangeSliderInit = () => {
const valueArray = [0, 400, 1000, 1500, 2000, 3000, 420
$(".slider").slider({
value: 400,
min: 0,
max: 4200,
});
}

【问题讨论】：

将您想要的值放入一个数组中，然后将滑块设置为与数组长度一样多的步数。当滑块值改变时，从当前索引处的数组中获取值。如果您需要更具体的帮助和一些示例，请编辑您的问题以显示您当前的代码。

标签： javascript jquery css slider

【解决方案1】：

这只是显示正确值的问题（实际上它可以是其他东西）。

创建一个值数组。将最大值设置为数组和步骤 1 中的选项数量。

这里我只是让滑块 min=0 和 max = 4，步长为 1。

您可以使用 sizes[ui.value] 作为滑块的值。

关于改变滑块值

var sizes = [0, 1200, 2000, 2200, 3000];
$("#slider").slider({
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $("#slider-value").text(sizes[ui.value]);
  }
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<h1>HTML Slider Test</h1>

<div id="slider"></div>

<p>Your slider has a value of <span id="slider-value"></span></p>

【讨论】：