Home » Jquery » javascript – Range Slider with output going to input element-Exceptionshub

javascript – Range Slider with output going to input element-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am making a range slider for pricing with showing output value, I want to do it with showing that output value in input element with the possibility to write any value there and it will automatically change the value in the slider , same in the opposite case .

I have already range slider with value going into span element as a text , but I can’t make it into functional input element. Any suggestions?

Here is the basic code of slider

$("#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>
How to&Answer: