Ползунок диапазона цены jQuery

277

05 декабря 2017, 20:07

Здравствуйте, есть ползунок диапазона цены. Выглядит вот так

 $( "#slider-range" ).slider({ 
        range: true, 
        min: 0, 
        max: 1000, 
        values: [ 0, 300 ], 
        step: 10, 
        slide: function( event, ui ) { 
            $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
        } 
    }); 
    $( "#price" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + 
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"> 
<input class="form-control" name="price" id="price"> 
<div id="slider-range"></div> 
<script 
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" 
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" 
  crossorigin="anonymous"></script>

Как сделать, чтобы цена отображалась вот так

Answer 1

Можно как-то так, но пример еще сыроват. К примеру у правой цены я сразу задал в стилях margin-left: 30%;, по хорошему в JS нужно его выставить как в обрабочике slide. Ну и при перекрывании левой и правой границ друг другом тоже сделать обработку условия, чтобы друг на друга не налазили. А так, пример вполне себе приемлемый для понимания и использования.

$("#slider-range").slider({ 
  range: true, 
  min: 0, 
  max: 1000, 
  values: [0, 300], 
  step: 10, 
  slide: function(event, ui) { 
    $("#rub-left").text(ui.values[0] + 'р.'); // текст левого span 
    $("#rub-right").text(ui.values[1] + 'р.'); // текст правого span 
 
    if (ui.handleIndex === 0) { 
      // потянули левый ползунок - переместим левый span   
      $("#rub-left").css('margin-left', ui.handle.style.left); 
    } else { 
      // потянули правый ползунок - переместим правый span 
      $("#rub-right").css('margin-left', ui.handle.style.left); 
    } 
  } 
}); 
 
// задать начальный текст левого span 
$("#rub-left").text($("#slider-range").slider("values", 0) + 'р.'); 
// задать начальный текст правого span 
$("#rub-right").text($("#slider-range").slider("values", 1) + 'р.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"> 
<div id="slider-range"></div> 
<div> 
  <span id="rub-left" style="position: absolute;"></span> 
  <span id="rub-right" style="position: absolute; margin-left: 30%;"></span> 
</div> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>