Question

51

Ho can I add two values in Bootstrap range slider

rated 0 times [ 55] [ 4] / answers: 1 / hits: 13921 / 3 Years ago, sun, january 24, 2021, 12:00:00

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;

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianom

Add To Favorites

Follow

Total Points: 601

Total Questions: 98

Total Answers: 109

Location: Kenya

Member since Fri, Dec 23, 2022

1 Year ago

lucianom questions

1 Map and sort data by date

Tue, Feb 22, 22, 00:00, 2 Years ago

1 Typescript axios typings

Wed, May 5, 21, 00:00, 3 Years ago

1 Discord.js, async and await

Sat, Aug 15, 20, 00:00, 4 Years ago

1 How do I call a JS Function in another file?

Mon, Jun 22, 20, 00:00, 4 Years ago

1 Mock exported const arrow functions with Jest

Tue, Feb 18, 20, 00:00, 4 Years ago

View All

answered 3 Years ago marissatinao · Accepted Answer

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>