为 jQuery UI 滑块添加“悬停”预览支持答案

【问题标题】：Add "hover" preview support to jQuery UI slider为 jQuery UI 滑块添加“悬停”预览支持
【发布时间】：2012-07-14 22:14:23
【问题描述】：

我正在使用 1 - 10 分等级的 jQuery UI 滑块。我想为滑块添加悬停支持。现在，当您滑动它时，滑块会随着您增加评分等级而改变颜色。它还在滑块外显示 1/10 比例。

我想增加人们将鼠标悬停在滑块的一部分上并将其更改为适当颜色的功能，并根据光标悬停的位置将 1/10 更改为适当的评级。但我不希望在用户单击滑块以保存评级之前触发实际的更改事件。如果它们悬停而未单击，则它会恢复到原始的加载状态。

这可能吗？滑块是否提供任何悬停功能？

【问题讨论】：

这需要一个hackish，相当复杂的方法。
@Raminson 你有推荐的方法或可能的代码示例吗？
您可以创建透明的跨度元素，并在悬停时更改它们的更改背景，我为我的网站创建了一个自定义滑块，但它没有悬停状态。 htmlpack.com/order.html

标签： jquery jquery-ui slider

【解决方案1】：

感谢 jQuery 论坛，我能够完成我需要的工作。以下是我基于此线程的解决方案：http://forum.jquery.com/topic/add-hover-preview-support-to-jquery-ui-slider

效果很好，但我仍然遇到一个 Firefox 问题。我已将错误分解为一个新线程：jQuery mousemove erratic movements and jumpy results in Firefox

$('#user-rating-slider').slider({
    value: userRating,
    min: 0,
    max: 10,
    step: 1,
    slide: function(event, ui) {
        updateSlider(ui.value);
    },
    change: function(event, ui) {
        ...
    }
}).on({
    mousemove: function(e) {
        e.stopPropagation();

        var width = $(this).width();
        var offset = $(this).offset();

        var value = Math.round(((e.pageX - offset.left) / width) * (10 - 0)) + 0;

        updateSlider(value);
    },
    mouseout: function() {
        updateSlider(userRating);
    }
});

【讨论】：

我相信你应该更新这个 :) 作为这里的注释：用 mouselease 替换 mouseout 修复了 firefox 问题。

【解决方案2】：

创建另一个函数，当您将鼠标悬停在新滑块上时保存当前滑块状态，然后动画到悬停的滑块。发布时让它回到保存的滑块位置。如果他们单击，它将使用与原始代码相同的滑块功能。

【讨论】：