Jquery UI slider() Method

Date Published: 08/05/2020 Published By: JaiSchool

Jquery UI's slider() widget will create a slider from a DIV element. You can select a numeric value by dragging its handle.

To create slider in Jquery UI, create a DIV element and give a id or class value to select in Jquery. And then apply slider() method on it.

Example-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI slider()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
	
<div id="slider"></div>

<script>
	$(document).ready(function(){
		$("#slider").slider();
	});

	</script>
</body>
</html>

Options of slider() method

OptionValue
maxnumeric value
minnumeric value
valueA value between min & max options
range"min", "max"

max Option

This defines the maximum value of slider.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI slider()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
  
<div id="slider"></div>

<script>
  $(document).ready(function(){
    $("#slider").slider({
      max:10,
    });
  });

  </script>
</body>
</html>

min Option

The value of the slider when it initializes, will be defined in the min option.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI slider()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
  
<div id="slider"></div>

<script>
  $(document).ready(function(){
    $("#slider").slider({
      max:10,
      min:3
    });
  });

  </script>
</body>
</html>

value Option

Defines default value of the slider.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI slider()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
  
<div id="slider"></div>

<script>
  $(document).ready(function(){
    $("#slider").slider({
      max:10,
      min:1,
      value:5
    });
  });

  </script>
</body>
</html>

range Option

It has two values min and max. When it is defined min the stylish range will be in the left side of the handle. If it is defined max then stylish range will be in the right side.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI slider()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
	
<div id="slider"></div>

<script>
	$(document).ready(function(){
		$("#slider").slider({
			max:100,
			value:20,
			range:"min",
		});
	});

	</script>
</body>
</html>

hidden class - .ui-slider-range

Official documentation:- https://api.jqueryui.com/slider/


Related posts
|| Jquery UI spinner() widget
|| Jquery UI progressbar() widget
|| Jquery UI tooltip() widget

Publish A Comment

Leave a Reply

Your email address will not be published.