Foundation 6 Slider 使用 disabled 和设置值

Question

我绞尽脑汁想弄明白这个问题。我的网站上有大量这样的酒吧。一些条显示默认值但无法更改。该网站目前是运行ning foundation 5，酒吧工作正常，但当转换为 6 时，系统失败。以下代码是他们的默认示例，显示初始值。

<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

现在我们获取代码并将禁用的 class 添加到滑块。当我们这样做时，它会禁用滑块，但会将滑块移回 0。

<div class="slider disabled" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

有没有人运行解决过这个问题并找到了解决方案。我只是想将值锁定为初始起始值。

Answer 1

在测试了我能想到的一切并与许多人合作后，我终于想出了一个解决方案。对于那些寻找答案的人，请享受下面的代码。

$('.sliderDisabled').on('moved.zf.slider',function(){
    $(this).addClass('disabled');
});

只需将 class sliderDisabled 添加到您的滑块即可。此代码将在条形手柄移动后禁用滑块。

Foundation 6 Slider 使用 disabled 和设置值

Foundation 6 Slider using disabled with a set value

javascript

css

jquery

slider

zurb-foundation