0

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

 $( "#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>

Как сделать, чтобы цена отображалась вот так введите сюда описание изображения

2
  • 1
    Делаете два span и привязываете каждый к позиции ползунков 4 дек 2017 в 11:52
  • Вы могли бы подсказать как правильно это сделать? 4 дек 2017 в 12:18

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.