If/then on Increment Slider?

StackOverflow https://stackoverflow.com/questions/23174300

  •  06-07-2023
  •  | 
  •  

Question

Is it possible to create an if/then statement on a increment slider? Here is the code:

<script>
$(function() {
    $( "#slider" ).slider({
        value:0,
        min: 0,
        max: 2,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p id="amount">
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

</p>
<div id="slider"></div>

In other words, I have a slider with 3 increments. When the increment is at min- I'd like it to display a div (with content) and at med and max two other divs.

I figure the best way is to do an if/then, but not exactly sure how to go about it.

Solution? 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Snap to increments</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>

</style>
<script>
$(function () {
    $("#slider").slider({
        value: 0,
        min: 0,
        max: 2,
        step: 1,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        },

        change: function (event, ui) {
            if (ui.value == 0) {
                $("#stepone").show();

            } 
             else if(ui.value == 1) {
                $("#stepone").hide();
                $("#steptwo").show();
                $("#stepthree").hide();            } 
            else {
                $("#stepone").hide();
                $("#steptwo").hide();
                $("#stepthree").show();            }
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));

});

</script>

</head>

<body>

<div id="stepone">Step One</div>

<div id="steptwo">Step Two</div>

<div id="stepthree">Step 3</div>
<input style="display:none"type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
</body>
</html>
Was it helpful?

Solution

Use the change event:

$( "#slider" ).slider({
    value:0,
    min: 0,
    max: 2,
    step: 1,
    slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
    },
    change: function( event, ui) {
        if (ui.value == 0) {
            $("#mindiv").show();
        } else {
            $("#mindiv").hide();
        }
    }
});

FIDDLE

OTHER TIPS

Handle the change event

$( "#slider" ).on( "slidechange", function( event, ui ) {
  var value = $( "#slider" ).slider( "value" );
  if(value==1){
  }else{
  }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top