Question

I am using a jQuery UI slider on a 1 – 10 rating scale. I would like to add hover support to the slider. Right now when you slide it, the slider turns colors as you increase the rating scale. It also displays a 1/10 scale outside the slider.

I would like to add the ability for people to hover over a portion of the slider and have it change to the appropriate color and change the 1/10 to the proper rating based on where the cursor is hovering. But I don’t want the actual change event to fire until the user clicks the slider to save the rating. If they hover off without clicking then it restores to the original onload state.

Is this possible? Does the slider offer any hover functionality?

Answer 1

I was able to accomplish what I needed thanks to the jQuery forums. Below is my solution based on this thread: http://forum.jquery.com/topic/add-hover-preview-support-to-jquery-ui-slider

It works great but there is still one Firefox issue I am having. I have broken the bug out into a new thread: 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);
    }
});