Home/ Questions/Q 8663191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:55:23+00:00

$(‘#slider’).slider({ range: min, value: 20, step: 5, min: 20, slide: function( event, ui )

  • 0
$('#slider').slider({
    range: "min",
    value: 20,
    step: 5,
    min: 20,
    slide: function( event, ui ) {
        $( "#amount1" ).val( "$" + ui.value );
    }
});

This is what I have right now, it’s a slider bar that displays the value. The HTML part is just as follows:

<label for="amount">Offer:</label>
<input type="text" id="amount1" />
<div id="slider"></div>

What I would like is to have a table below it with a block of text; except I’d like the text to change as the value is increased. Say, if it was >= 20 and < 40 it’s say "Blah1" =>40 it’d would say “blah2”

But I’m having trouble adding another event to the slide function.

Thank you very much for your help, I’ll be able to apply it to a lot of things. Normally it’s just one function per script, I’ve never layered them like this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All you should have to do is add an extra piece of code to the existing function that evaluates the value of ui.value:

    $('#slider').slider({
    range: "min",
    value: 20,
    step: 5,
    min: 20,
    slide: function(event, ui) {
        $("#amount1").val("$" + ui.value);

        if (ui.value >= 20 && ui.value < 40) {
            $("#message").text("greater than or equal to 20 and less than 40");
        } else if (ui.value >= 40) {
            $("#message").text("greater than or equal to 40");
        }
    }
});

    Example: http://jsfiddle.net/andrewwhitaker/WP29E/16/

    • 0