Ho can I add two values in Bootstrap range slider

I'm using the Bootstrap slider plugin to create a Range Slider

I want to build a range slider with two values like this example below :

The result that I want to achieve :

HTML :

<form>
<div class="d-flex justify-content-between">
   <small><span id="minP">50</span> $</small>
   <small><span id="betP">100</span> $</small>
   <small>2000 $</small>
</div>

<input type="text" id="exampleRange"
    data-slider-min="50"
    data-slider-max="2000"
    data-slider-step="1"
    data-slider-value="[1,100]"
    data-slider-tooltip="hide" />
</form>

JAVASCRIPT:

var exSlider = new Slider('#exampleRange');
exSlider.on('slide', function(minPValue, betPValue) {
    document.getElementById('minP').textContent = minPValue;
    document.getElementById('betP').textContent = betPValue;
});

here is my attempt.

const setLabel = (lbl, val) => {
  const label = $(`#slider-${lbl}-label`);
  label.text(val);
  const slider = $(`#slider-div .${lbl}-slider-handle`);
  const rect = slider[0].getBoundingClientRect();
  label.offset({
    top: rect.top - 30,
    left: rect.left
  });
}

const setLabels = (values) => {
  setLabel("min", values[0]);
  setLabel("max", values[1]);
}


$('#ex2').slider().on('slide', function(ev) {
  setLabels(ev.value);
});
setLabels($('#ex2').attr("data-value").split(","));

#slider-div {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

#slider-div>div {
  margin: 8px;
}

.slider-label {
  position: absolute;
  background-color: #eee;
  padding: 4px;
  font-size: 0.75rem;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" integrity="sha512-SZgE3m1he0aEF3tIxxnz/3mXu/u/wlMNxQSnE0Cni9j/O8Gs+TjM9tm1NX34nRQ7GiLwUEzwuE3Wv2FLz2667w==" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous"></script>
</head>

<body>
  <p>
    this is a test
  </p>
  <div id="slider-outer-div">
    <div id="slider-max-label" class="slider-label"></div>
    <div id="slider-min-label" class="slider-label"></div>
    <div id="slider-div">
      <div>50 DH</div>
      <div>
        <input id="ex2" type="text" data-slider-min="50"
           data-slider-max="2000" data-slider-value="[50,300]"
           data-slider-tooltip="hide" />
      </div>
      <div>2000 DH</div>
    </div>
  </div>
</body>

Recommended topics

Hot tags