jQuery Range UI Slider With Tooltip, Labels

jQuery range UI slider with tooltip or labels; Through this tutorial, i am going to show you how to implement slider into your web app using the jquery UI range slider plugin.

jQuery Range UI Slider With Tooltip, Labels

Create HTML file
Include Range slide JS libraries
Initialize jQuery range slider
Option 1 – jQuery Minimum Range UI Slider
Option 2 – jQuery Maximum Range UI Slider
Option 3 – jQuery Range UI Slider Min Max

Create HTML file

Create one html file and add following html code in this file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Range UI Slider</title>
  <link rel="stylesheet" href="//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>
</head>
<body>
 
<div id="range_slider"></div> 
</body>
</html>

Include Range slide JS libraries

Include jQuery range slider js libraries in HTML file:

  <link rel="stylesheet" href="//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>

Initialize jQuery range slider

Initialize the jQuery range slider. You can see the below:

  <script>
  $( function() {
    $( "#range_slider" ).slider();
  } );
  </script>

Option 1 – jQuery Minimum Range UI Slider

If you want to set the minimum range of slider, you can follow the below steps:

You need to include the below html and script code for minimum range slider:

<p>
  <label for="number">Manimum Range:</label>
  <input type="text" id="number" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="min-range-slider"></div>
   <script>
    $( function() {
    $( "#min-range-slider" ).slider({
      range: "min",
      value: 37,
      min: 1,
      max: 700,
      slide: function( event, ui ) {
        $( "#number" ).val( "$" + ui.value );
      }
    });
    $( "#number" ).val( "$" + $( "#min-range-slider" ).slider( "value" ) );
  } );
  </script>

Option 2 – jQuery Maximum Range UI Slider

If you want to set maximum range of slider, you can follow the below steps:

You need to include the below html and script code for maximum range slider:

<p>
  <label for="number">Manimum Range:</label>
  <input type="text" id="number" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="max-range-slider"></div>
  <script>
$( function() {
    $( "#max-range-slider" ).slider({
      range: "max",
      min: 1,
      max: 10,
      value: 2,
      slide: function( event, ui ) {
        $( "#number" ).val( ui.value );
      }
    });
    $( "#number" ).val( $( "#max-range-slider" ).slider( "value" ) );
  } );
  </script>

Option 3 – jQuery Range UI Slider Min Max

If you want to set min or max values in single slider, you can follow the below steps:

You need to include below html code or script in your file:

<p>
  <label for="number">Manimum Range:</label>
  <input type="text" id="number" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="range-slider"></div>
  <script>
  $( function() {
    $( "#range-slider" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#range-slider" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>

jQuery Range UI Slider With Tooltip, Labels