How to use Slider in price use jquery step by step solution? ,2024

In this article, we learn about how to use the price range slider with jquery. An example of a single slider implementing exactly what you require using jquery with HTML.

There are a few codes to use slider drag a handle to select a numeric value

HTML & jquery Code with example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider();
  } );
  </script>
</head>
<body>
 
<div id="slider"></div>
 
 
</body>
</html>

if we are using a slider like to change price value in input box value like the following screenshot

then we can use the following code.

HTML Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider();
  } );
  </script>
</head>
<body>
 <input type="text" id="input" />
<div id="slider"></div>
 
 
</body>
</html>

Javascript Code

  
jQuery( "#slider" ).slider({
range: "min",
     step:100000,
animate:"fast",
      min:100000,
      max:10000000,
       value: [100000],
       slide: function( event, ui ) {
var a=0+ui.value;
var b=100000+ui.value;
var extra_val  =  "";
if(ui.value ==9925000){
    extra_val = "+";
}else{
    extra_val = "";
}

jQuery("#input" ).val("$"+a.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+" to $"+b.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+extra_val);

      }
    });
    

Discover more from STRUGGLER KING.COM

Subscribe now to keep reading and get access to the full archive.

Continue Reading