Home/ Questions/Q 8549755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:47:30+00:00

I have a jQuery Mobile slider with a min value of 0 and a

  • 0

I have a jQuery Mobile slider with a min value of 0 and a max value of 100 and a constraint value of 35. If the slider starts at 0 and the user starts to slide the slider, how do I get the slider to stop at 35?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following script stops a slider at the value of 35:

    $(document).on('change', '#slider-fill', function(e){
    if($("#slider-fill").val() > 35){
       $("#slider-fill").val(35);
       $("#slider-fill").next(".ui-slider").find("div").css("width","35%");
       $("#slider-fill").next(".ui-slider").find("a.ui-slider-handle").css("left","35%");
    }
});

    Below you can find a working example:

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>Slider Stop</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on('change', '#slider-fill', function(e){
                if($("#slider-fill").val() > 35){
                   $("#slider-fill").val(35);
                   $("#slider-fill").next(".ui-slider").find("div").css("width","35%");
                   $("#slider-fill").next(".ui-slider").find("a.ui-slider-handle").css("left","35%");
                }
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Slider stop</h1>
            </div>
            <!-- /content -->
            <div data-role="content">
                <label for="slider-fill">Input slider:</label>
                <input type="range" name="slider-fill" id="slider-fill" value="0" min="0" max="100" data-highlight="true" />
            </div>
        </div>
    </body>
</html>

    I hope this helps.

    • 0