Question

我想通过它的手柄以及选择列表来控制滑块。无法弄清楚如何将它们连接在一起。我使用的是jQuery-ui和jQuery UI Pips.js

到目前为止，这是我的代码：

HTML：

<div id="awesome2"><div>
<div id = "selector">
    <select  id = "num" onclick = "setNum();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>

这是JS：

function setNum() {
  var num = document.getElementById("num").value;
  //some other function to apply in here ...
}

var min = 1;
var max = 5;

$("document").ready(function() {
  var $awesome2 = $("#awesome2").slider({
    max: max,
    step: 1,
    min: min
  });
  $awesome2.slider("pips", {
    rest: "label"
  }).slider("float");
  setNum();
});

由于某些原因，当我从滑块调用时，函数setNum();不起作用，并且“选择”列表未链接到滑块。

作为最终结果，我希望能够通过选择列表和滑块控制滑块，例如：如果我从选择列表中选择值，则滑块会选取此值并将滑块移动到该位置，反之亦然，如果我手动移动滑块传递给选择列表的值。如果有意义的话。

我花了4个小时才弄清楚出了什么问题，但仍然没有运气。任何帮助高度赞赏。

Answer 1

使用代码：

$("$awesome2")
   .slider( "option", "value", document.getElementById("num").value );

这允许您更改滑块的内部值，jQuery Slider Pips将自动更新它的样式以反映此选项：）

http://jsfiddle.net/fqxebdye/

控制滑块通过“选择”列表进行切换

1 个答案: