0

How to make Slider with value on a handle using Bootstrap? Or in worst case using jQuery, but Most preferable is Twitter Bootstrap.

enter image description here

In particular I want something like this slider but on bootstrap

<div id="slider"></div>
$("#slider").slider({
    change: function() {
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    },
    slide: function() {
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    }
});
Renat Gatin
  • 6,053
  • 5
  • 37
  • 58
  • There is no sliders in Bootstrap, you have to use external library for that. – max Oct 29 '15 at 14:57
  • Can I use AngularJS? – Renat Gatin Oct 29 '15 at 17:45
  • AngularJS is just a framework for dynamic web apps. It is not related to sliders at all. – max Oct 29 '15 at 17:58
  • Hi, can I ask whether you managed to achieve this in the end? https://www.npmjs.com/package/ngx-bootstrap-slider was the best I could find but no option to place text in between the range inside the slidebar – Sid Sep 09 '19 at 19:52

1 Answers1

0

As official bootstrap site cites:

"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web."

Bootstrap is for responsive web design means you can create a mobile friendly and responsive layout. Refer to this for better understanding :What is Bootstrap?

Now to actually achieve what you need , you can use jquery. Follow this you may find something close to you want : http://www.jqueryrain.com/demo/jquery-range-slider/

Community
  • 1
  • 1
Ali Malik
  • 1,331
  • 1
  • 10
  • 19