I've implemented the UI Jquery slider and it works very well. But know what I want to do is make the slider moving when clicking on some links.

But I get the error : Uncaught ReferenceError: Invalid left-hand side in assignment slider.html:88 (anonymous function)

so here's my code :

<script>

    $(function() {
        $( "#slider" ).slider({
            range: "min",
            value:0,
            min: 0,
            max: 200,
            step: 50,

            create: function( event, ui ) {
                $("#packs a").css("color", "#336799");
                $("#packs .pack1").css("color", "#b84a00");
            },
            slide: function( event, ui ) {

                switch(ui.value) {
                    case 0:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack1").css("color", "#b84a00");
                        break;
                    case 50:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack2").css("color", "#b84a00");
                        break;
                    case 100:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack3").css("color", "#b84a00");
                        break;
                    case 150:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack4").css("color", "#b84a00");
                        break;
                    case 200:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack5").css("color", "#b84a00");
                        break;
                    default:
                        $("#packs a").css("color", "#336799");
                }
            }
        });
    });
</script>

<div id="offers">
    <div id="slider">
        <div class="marker" style="left: 124.25px;"></div>
        <div class="marker" style="left: 248.5px;"></div>
        <div class="marker" style="left: 372.75px;"></div>
        <div class="handler"></div>
    </div>

    <div id="packs">
        <a class="pack1" href="javascript:;">Pack1</a>
        <a class="pack2" href="javascript:;">Pack2</a>
        <a class="pack3" href="javascript:;">Pack3</a>
        <a class="pack4" href="javascript:;">Pack4</a>
        <a class="pack5" href="javascript:;">Pack5</a>
    </div>
</div>

<script type="text/javascript">
    $(".pack1").click(function() {
        $("#slider").slider("value") = 0; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack2").click(function() {
        $("#slider").slider("value") = 50; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack3").click(function() {
        $("#slider").slider("value") = 100; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack4").click(function() {
        $("#slider").slider("value") = 150; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack5").click(function() {
        $("#slider").slider("value") = 200; // ERROR
        $("#slider").slider("slide");
    });
</script>

Si I see that the error is related to this line : $("#slider").slider("value") = Something

Do you, please have any idea about this ?

Thank you.

I've implemented the UI Jquery slider http://jqueryui./slider/#steps and it works very well. But know what I want to do is make the slider moving when clicking on some links.

But I get the error : Uncaught ReferenceError: Invalid left-hand side in assignment slider.html:88 (anonymous function)

so here's my code :

<script>

    $(function() {
        $( "#slider" ).slider({
            range: "min",
            value:0,
            min: 0,
            max: 200,
            step: 50,

            create: function( event, ui ) {
                $("#packs a").css("color", "#336799");
                $("#packs .pack1").css("color", "#b84a00");
            },
            slide: function( event, ui ) {

                switch(ui.value) {
                    case 0:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack1").css("color", "#b84a00");
                        break;
                    case 50:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack2").css("color", "#b84a00");
                        break;
                    case 100:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack3").css("color", "#b84a00");
                        break;
                    case 150:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack4").css("color", "#b84a00");
                        break;
                    case 200:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack5").css("color", "#b84a00");
                        break;
                    default:
                        $("#packs a").css("color", "#336799");
                }
            }
        });
    });
</script>

<div id="offers">
    <div id="slider">
        <div class="marker" style="left: 124.25px;"></div>
        <div class="marker" style="left: 248.5px;"></div>
        <div class="marker" style="left: 372.75px;"></div>
        <div class="handler"></div>
    </div>

    <div id="packs">
        <a class="pack1" href="javascript:;">Pack1</a>
        <a class="pack2" href="javascript:;">Pack2</a>
        <a class="pack3" href="javascript:;">Pack3</a>
        <a class="pack4" href="javascript:;">Pack4</a>
        <a class="pack5" href="javascript:;">Pack5</a>
    </div>
</div>

<script type="text/javascript">
    $(".pack1").click(function() {
        $("#slider").slider("value") = 0; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack2").click(function() {
        $("#slider").slider("value") = 50; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack3").click(function() {
        $("#slider").slider("value") = 100; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack4").click(function() {
        $("#slider").slider("value") = 150; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack5").click(function() {
        $("#slider").slider("value") = 200; // ERROR
        $("#slider").slider("slide");
    });
</script>

Si I see that the error is related to this line : $("#slider").slider("value") = Something

Do you, please have any idea about this ?

Thank you.

• javascript
• jquery
• jquery-ui
• slider
• jquery-ui-slider

• 1 You can't assign a value to the return value of a function. – Quentin Commented Sep 18, 2013 at 17:36

3 Answers 3

The proper way to set a slider's value is:

$( ".selector" ).slider({ value: 10 });

See http://api.jqueryui./slider/#option-value

You are getting the error because you are trying to assign a value to the result of a function, which isn't allowed.

To set the value of the slider after initialization, do this:

// getter
var value = $( ".selector" ).slider( "option", "value" ); 

// setter
$( ".selector" ).slider( "option", "value", 10 );

See the documentation:

Below is the fixed code:

$(".pack1").click(function() {
    $("#slider").slider({ value: 0 });
    $("#slider").slider("slide");
});
$(".pack2").click(function() {
    $("#slider").slider({ value: 50 }); //Fixed

    $("#slider").slider("slide");
});
$(".pack3").click(function() {
    $("#slider").slider({ value: 100 }); //Fixed
    $("#slider").slider("slide");
});
$(".pack4").click(function() {
    $("#slider").slider({ value: 150 }); //Fixed
    $("#slider").slider("slide");
});
$(".pack5").click(function() {
    $("#slider").slider({ value: 200 }); //Fixed
    $("#slider").slider("slide");
});

Check the jsfiddle for working code: http://jsfiddle/sandeep605085/snWmk/

Check the JQuery documentation: http://api.jqueryui./slider/#option-value

Thanks,
Sandeep