CODEWITHSUNDEEP
jqueryjquery-uislider
ATLChris
ATLChris

Reputation: 3296

Add "hover" preview support to jQuery UI slider

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?

Upvotes: 0

Views: 2011

Answers (2)

ATLChris
ATLChris

Reputation: 3296

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);
    }
});

Upvotes: 2

David Abraham
David Abraham

Reputation: 61

Create another function that saves current slider state when you hover over new one, then animates to the hovered slider. On release have it go back to the saved slider pos. And if they click, it will use the same slider functionality as your original code.

Upvotes: 0

Related Questions