Range Slider с выводом на входной элемент - PullRequest
Новая
       98

Range Slider с выводом на входной элемент

0 голосов
/ 15 февраля 2020

Я делаю ползунок диапазона для расчета цены с отображением выходного значения, я хочу сделать это с показом этого выходного значения во входном элементе с возможностью записи любого значения там, и оно автоматически изменит значение в ползунке, то же самое в противоположный случай.

У меня уже есть ползунок диапазона со значением, входящим в элемент span как текст, но я не могу сделать его функциональным элементом ввода. Есть предложения?

Вот базовый c код слайдера 

$("#ex6").slider({
  ticks: [100, 3000],
  ticks_labels: ['100 $', '3000 $']
});
$("#ex6").on("slide", function(slideEvt) {
  $("#ex6SliderVal").text(slideEvt.value + ' $');
});
form {
  margin: 5% 5%;
}

.slider-tick {
  display: none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js"></script>

<form id="formsection">
  <div class="form-row">
    <div class="form-group col-2 rangepeniaze">
      <input id="ex6" type="text" data-slider-id='ex1Slider' data-slider-ticks="[4000,250000]" data-slider-min="100" data-slider-max="3000" data-slider-step="10" data-slider-value="1200" data-slider-ticks-labels='["100", "3000"]' />
    </div>
    <div class="form-group col-2 peniaze">
      <span id="ex6SliderVal">1200 $</span></span>
</form>
...