Question

我正在使用http://simeydotme.github.io/jQuery-ui-Slider-Pips/滑块插件，无法重新实现插件值。我们有一个复选框，如果选中滑块应显示范围，如果未选中复选框，则应设置最大范围，用户只能设置开始范围。反之亦然。

我使用的代码是：

＆＃13;

if (true) 
{
        $this.find(".div").slider({
            min: 0,
            max: 50,
            value: startMonth,
            range: "max"
        });
}
else
{
        $this.find(".div").slider({
            min: 0,
            max: 50,
            values: [10, 20],
            range: true
        });
}

＆＃13;

我也尝试过更新选项，但表现得很奇怪。

＆＃13;

$this.find(".div").slider()
.slider("option", "value", startMonth)
.slider("option", "values", null)
.slider("pips", "refresh");

＆＃13;

Answer 1

我认为必须是导致错误的null。此外，在设置选项之前，您不应该致电：.slider()，而只需创建 NEW 滑块:)

更新：稍微更改了设置，效果更加一致：https://jsfiddle.net/fbwsn4uc/2/

if( x ) {
  settings = {
    max: 30,
    range: "max",
    value: 10
  };
} else {
  settings = {
    min: 0,
    max: 30,
    range: true,
    values: [ 5, 20 ]
  };
}

// refresh the slider with the new settings.
$(".slider")
  .slider( "option", settings )
  .slider( "pips", "refresh" );

Answer 2

我正在做的是销毁滑块并重新初始化它。我不确定这是否是一种优雅的方式，但似乎工作正常。

＆＃13;

$this.find(".div").slider("destroy").removeClass("ui - slider - pips");

if (true)
  {
  this.find(".div").slider({
                min: 0,
                max: months.length - 1,
                value: startMonth,
                range: "max"
            })
            .slider("pips", {
                rest: "label",
                labels: months
            });
  }
else
  {
            this.find(".div").slider({
                min: 0,
                max: months.length - 1,
                values: [startMonth, months.length - 2],
                range: true
            })
             .slider("pips", {
                 rest: "label",
                 labels: months
             });

  }

＆＃13;

如何刷新重新复制/刷新Pip Slider插件？

2 个答案: