0

I'm using Jquery UI price range slider this is working perfectly but I want price value with input text and that will be editable.

Anybody can do it?

If anybody has any other plugin or custom code & suggestion then please share.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://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>
  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      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">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
 
</body>
</html>

1
  • You could just add a Textbox and have that value influence the slider Jul 27, 2017 at 8:21

2 Answers 2

3

There you go. Bind onchange event to inputs, remove readonly and that's it.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://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>
  <script>
    $(function() {
      $("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [75, 300],
        slide: function(event, ui) {
          $("#amount_min").val(ui.values[0]);
          $("#amount_max").val(ui.values[1]);
        }
      });
      $("#amount_min").val($("#slider-range").slider("values", 0));
      $("#amount_max").val($("#slider-range").slider("values", 1));
      $("#amount_min").change(function() {
        $("#slider-range").slider("values", 0, $(this).val());
      });
      $("#amount_max").change(function() {
        $("#slider-range").slider("values", 1, $(this).val());
      })
    });
  </script>
</head>

<body>

  <p>
    <label for="amount">Price range:</label>
    $<input type="text" id="amount_min" style="border:0; color:#f6931f; font-weight:bold;">
    $<input type="text" id="amount_max" style="border:0; color:#f6931f; font-weight:bold;">
  </p>

  <div id="slider-range"></div>


</body>

</html>

1

Here you go with one more solution https://jsfiddle.net/n4h6624h/

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
      
    $('#amount').focusout(function(){
    	var sliderVal = $(this).val();
      var splitSliderVal = sliderVal.replace(/\$/g, '').split('-');
      $( "#slider-range" ).slider({
      	values: [ parseInt(splitSliderVal[0]), parseInt(splitSliderVal[1]) ]
      });
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.