JQuery UI Slider - Snap to Increments Example

jQuery · 11-Apr-2023

Hi Guys,

In this example,I will learn you how to use slider snap increment in jquery ui.you can easy and simply use slider snap increment in jquery ui.

jQuery UI also allows you to create a snap to increment Slider which has a set step size or interval to increment or decrement by.

Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Snap to increments Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style type="text/css">
        .content{
            margin:40px auto;
            width:400px;
        }
        h2{
        	text-align: center;
        }
        body{
        	background-color: #efcbaa;
        }
    </style>
</head>
<body>
	<h2>JQuery UI Slider - Snap to Increments Example</h2>
    <div class="content">
        <p>
            <label for="amount">Donation amount ($50 increments):</label>
            <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
        </p>
        <div id="slider"></div>
    </div>
</body>
<script>
$(function(){
    $("#slider").slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function(event, ui) {
            $("#amount" ).val("$" + ui.value);
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));
});
</script>
</html>

It will help you....