Search jQuery

jQuery Forum

Multiple range sliders?

in Using jQuery UI • 12 years ago

Forgive me here if this is a basic question but I had a look at both multiple sliders and slider range and can't figure out how to combine them so I can have more than one range slider on the page. I currently have this code:

$(function() {
$( ".slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
" - $" + $( ".slider-range" ).slider( "values", 1 ) );
});

I then have this to display the slider and range:

<div class="slider">
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div class="slider-range"></div>
</div>

But I would then like to add a couple more sliders with different values.

Any help would be greatly appreciated.

Replies(2)

kbwood.au

Re: Multiple range sliders?

12 years ago

Just give them different IDs and target that when initialising the sliders:

$('#slider1').slider({...});
$('#slider2').slider({...});
$('#slider3').slider({...});
<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>

Paul Vanc..

Re: Multiple range sliders?

8 years ago

I have a working example

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Slider - Vertical slider</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        
        <script>
            $(function () {
                $("#slider-vertical1").slider({
                    orientation: "vertical",
                    range: "min",
                    min: 0,
                    max: 3000,
                    step: 100,
                    value: 100,
                    slide: function (event, ui) {
                        //          document.write (ui.value);
                        $("#amount1").val(ui.value + "g");
                    }
                });

                $("#slider-vertical2").slider({
                    orientation: "vertical",
                    range: "min",
                    min: 0,
                    max: 2000,
                    step: 100,
                    value: 100,
                    slide: function (event, ui) {
                        //          document.write (ui.value);
                        $("#amount2").val(ui.value + "g");
                    }
                });
                $("#amount1").val($("#slider-vertical2").slider("value" + "g"));
                $("#amount2").val($("#slider-vertical1").slider("value" + "g"));
            });
        </script>

    </head>
    <body>
        <form method="get" action="test2.php" name="slider1">
            <p>

                <label for="amount1">gewicht</label>
                <input type="text" id="amount1" name="amount1" readonly style="border:0; color:#f6931f; font-weight:bold;" value="100 g">
                <input type="submit" value="ok">
            </p>

            <div class="slider" id="slider-vertical1" style="height:200px;"></div>

            <p>
                <label for="amount2">gewicht</label>
                <input type="text" id="amount2" name="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;" value="100 g">
                <input type="submit" value="ok">
            </p>

            <div class="slider" id="slider-vertical2" style="height:200px; "></div>
        </form>

    </body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Multiple range sliders?

Replies(2)

Re: Multiple range sliders?

Re: Multiple range sliders?

Statistics

Tags

Actions