Question

I’m pretty new to jquery, but this is question. From my code below I have made 3 sliders each within a tag. Each of the three has an input field that is changed when the slider is moved to show the current value of the slider (simple jQueryUI plugin sliders). The final line involves another plugin that links all the sliders together so that they all add to 100 total and move when the others move.

The problem I’m having is that when I slide one, its value changes and shows but the others do not. I can get all of the values to change with some extra lines of code, but I don’t know how to get (this) ui.value so that I can display the separate values for each of the sliders.

You can see in the third slider I tried to get it to do that, but the way it is set it only takes the same ui.value of the current slider being moved.

Can anyone help me with a solution to get (this) ui.value of the other sliders when i need to change it?

($(function() {
    $( "#RedSlider" ).slider({
        orientation: "horizontal",
        range: "min",
        min: 0,
        max: 100,
        value: 1,
        animate: true,
        slide: function( event, ui ) {
        $( "#RedValue" ).val( ui.value );}
    });
    $( "#RedValue" ).val( $( "#RedSlider" ).slider( "value" ) );
});

$(function() {
    $( "#BlueSlider" ).slider({
        orientation: "horizontal",
        range: "min",
        min: 0,
        max: 100,
        value: 1,
        animate: true,
        slide: function( event, ui ) {
        $( "#BlueValue" ).val( ui.value );}
    });
    $( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
});

$(function() 
{
    $( "#EmptySlider" ).slider({
        orientation: "horizontal",
        range: "min",
        min: 0,
        max: 100,
        value: 98,
        animate: true,
        slide: function( event, ui ) 
        {
            $( "#EmptyValue" ).val( ui.value );
                            $( "#RedValue").val(ui.value);
                            $( "#BlueValue").val(ui.value);
        }
    });
    $( "#EmptyValue" ).val( $( "#EmptySlider" ).slider( "value" ) );
            $( "#RedValue").val($("RedSlider)").slider("value"));
            $( "#BlueValue").val($("RedSlider)").slider("value"));
});*/

$('div:gt(2)').slider().linkedSliders({policy: 'last'});

Answer 1

This code:

$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );

will only execute once. You need to have that in a value-changed callback for the slider, so the value will be updated continually.