Atmos
Search
K

Rangeslider

We have used jQueryUI range slider for input range slider inputs.

Step 1

Include jQueryUI stylesheet before atmos theme Stylesheet to make sure it properly overrides the UI according to our needs
<link rel="stylesheet" href="assets/vendor/jquery-ui/jquery-ui.min.css">

Step 2

Add jqueryUI JavaScript files if not included already.
<script src="assets/vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

Step 3

Add markup
<div class="input-slider"></div>

Step 4

Initialize the plugin
$(".input-slider").slider({
range: "min",
});