change html with jquery select to ui slider slide event

Question

So I've got a select and a function to convert it to a slider using http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

<select id="{{ section }}-anonymity-select">
    <option value="anonymous"></option>
    <option value="uw-student"></option>
    <option value="username"></option>
</select>

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            alert(ui.value);
        }
    }
    }).hide();

What I would like to do is (for now, later I want to change the innerHtml of another element based on the value) alert the current value of the slider as the user is sliding.

The code does almost what I want, except that the slide event "is triggered on every mouse move during slide.", which means about 10 times for one little slide. Very annoying. Not what I want. And it seems to programmatically change the value, too-- my handle keeps jumping all over the place.

I also tried change, but it's only triggered on stop, so if the user is just sliding back and forth but not releasing their mouse button, it won't alert. bad.

How do I handle this? I guess I need something like "on value change" as an event? But how to implement that without constantly checking for it?

Have you tried using the `stop` event instead of the `slide` event? — Explosion Pills, Mar 15 '12 at 20:10
yup, same thing as change, it didn't trigger until I released the mouse button. — Colleen, Mar 15 '12 at 20:12
So wait, you want it to trigger *before* you release the button? — Explosion Pills, Mar 15 '12 at 20:12

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Rather than using the slide event, you should use the change event which only fires once the user stops interacting with the widget:

Change:

    slide: function(event, ui){
        alert(ui.value);
    }

To:

    stop: function(event, ui){
        alert(ui.value);
    }

Walaa! :)

This event is triggered when the user stops sliding.

Source: http://jqueryui.com/demos/slider/#event-stop

Update

You could use the slide event and set a timeout to alert the value so when the user keeps sliding no alert will appear (due to canceling the timeout):

var slidervalue = 0,
    timer;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            clearTimeout(timer);
            setTimeout(function () {
                if(ui.value!=slidervalue){
                    $("#"+section+"-anonymity-header").html("Select anonymity level: "+$(this).slider('values', ui.value));
                    slidervalue = ui.value;
                }
             }, 100);
        }
    }
    }).hide();

I tried stop, it didn't work for me until I released the mouse button. — Colleen, Mar 15 '12 at 20:15
@Colleen I **updated** my answer to show how you can use the `slide` event and `setTimeout` to only run the code in the `slide` event handler when the user stops moving for atleast `100ms`. — Jasper, Mar 15 '12 at 20:19

score 0 · Accepted Answer · answered Mar 15 '12 at 20:15

of course 2 minutes after I post I realize a solution.

var slidervalue = 0;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            if(ui.value!=slidervalue){
                $("#"+section+"-anonymity-header").html("Select anonymity level: "+ui.value);
                slidervalue = ui.value;
            }
        }
    }
    }).hide();

change html with jquery select to ui slider slide event

2 Answers2

Update