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>

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *