如何在页面加载期间禁用 Foundation 的 6 个范围滑块的初始移动？答案

【问题标题】：How to disable the init movement of Foundation's 6 range sliders during page load?如何在页面加载期间禁用 Foundation 的 6 个范围滑块的初始移动？
【发布时间】：2016-11-08 21:12:52
【问题描述】：

我在一个页面上有大约 50 个范围滑块。由于滑块手柄的初始运动，这些非常滞后。如何禁用此功能？

有什么想法吗？

【问题讨论】：

对不起，除了禁用滑块之外，我还没有找到停止滑动的方法。那么问题是滑块手柄处于下限位置，即使该值可以正确设置。这是 F6 的另一个不幸问题。我认为您可以将 data-start 设置为与您的 initial-start 相同的值，然后使用 js 将 data-start 重置为零或任何您的下限。这将使滑块不必移动，但我无法成功地将滑块数据开始重置为零。（如果有人能弄清楚也许它会起作用？）

标签： jquery slider zurb-foundation zurb-foundation-6

【解决方案1】：

您可以在初始化滑块时从滑块句柄类中删除 css 过渡，然后在滑块值更改时恢复过渡 - 到目前为止这对我有用

例如：

function mySliderInit(){

    // remove all transitions
    $(".slider-handle").css({
        transition: 'none'
    });

    // ...code to initialise slider
}

// Initialise slider
mySliderInit();

$(".slider").on("changed.zf.slider", function() {

    // restore transitions as defined in foundation.css
    $(".slider-handle").css({
        transition: ''
    });

    // ...handle slider value change
});

【讨论】：