Breaking News: Grepper is joining You.com. Read the official announcement!

jquery range slider

YOU.com answered on September 11, 2023 Popularity 8/10 Helpfulness 4/10

answer jquery range slider

jquery range slider

Comment

<!-- HTML -->
<div id="slider"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

<script>
  $(function() {
    $("#slider").slider({
      range: true,
      min: 0,
      max: 100,
      values: [20, 80], // Initial range values
      slide: function(event, ui) {
        // Access range values using ui.values[0] and ui.values[1]
      }
    });
  });
</script>

Popularity 8/10 Helpfulness 4/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

range slider jquery

Comment

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #slider-range {
      width: 200px;
      margin: 20px;
    }
  </style>
  <script>
    $(document).ready(function() {
      $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 100,
        values: [ 25, 75 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        }
      });
      $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
        " - " + $( "#slider-range" ).slider( "values", 1 ) );
    });
  </script>
</head>
<body>
 
<p>
  <label for="amount">Selected Range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f;">
</p>
 
<div id="slider-range"></div>
 
</body>
</html>

Popularity 8/10 Helpfulness 2/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

jquery range slider

Contents

More Related Answers

jquery range slider

Closely Related Answers

range slider jquery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.