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 you have read our privacy policy.

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