showing results for - "bootstrap 3 min max price range slider"
Elyas
07 Jun 2019
1<!doctype html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>jQuery UI Slider - Range slider</title>
7  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
8  <link rel="stylesheet" href="/resources/demos/style.css">
9  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
10  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
11  <script>
12  $( function() {
13    $( "#slider-range" ).slider({
14      range: true,
15      min: 0,
16      max: 500,
17      values: [ 75, 300 ],
18      slide: function( event, ui ) {
19        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
20      }
21    });
22    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
23      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
24  } );
25  </script>
26</head>
27<body>
28 
29<p>
30  <label for="amount">Price range:</label>
31  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
32</p>
33 
34<div id="slider-range"></div>
35 
36 
37</body>
38</html>
39