'How can I change the size of bootstrap slider?

Jsfiddle link is https://jsfiddle.net/gzp0pcot/

I am using Bootstrap slider from

https://github.com/seiyria/bootstrap-slider

I tried to change it using css but it didn't work perfectly.

How can I change the slider width and height ?

I want the final size to be almost 4 times than the current size.

I used the inspector to change following css code:

.slider.slider-horizontal .slider-track {
    height: 30px;
    width: 200%;
    margin-top: -5px;
    top: 50%;
    left: 0;
}

Above I changed height and width value, it increases size but 200% doesn't make sense and is not working properly.

javascriptjqueryhtmlcsstwitter-bootstrap


Solution 1:[1]

You are adding the wrong slider class to set width in. You need to add custom width in the class .slider.slider-horizontal which bootstrap sets the default width in. Add the following class to your fiddle and you can set the width in px or in % or in viewport unit of vw. It will increase the size to that value.

.slider.slider-horizontal{
  width:400px; /* sample value - set it as you like*/
}

Hope this helps.

Solution 2:[2]

Use the following css 

.slider.slider-horizontal{
 width:1200px !important;
 }

Hope it helps.

Solution 3:[3]

I have the same problem, but need distinct sizes in same site. My solution was add an ID to this element, and then add on css the id:

#MYSliderID.slider.slider-horizontal {
    width: 80px;
    height: 20px;
  }
<div class='col-sm-4 col-md-1'>  <input  id='MyInputID' type='text'  data-slider-min='0'  data-slider-max='10' data-slider-step='0.05'data-slider-value='0'  data-slider-id='MYSliderID'     />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nasir T
Solution 2 Vikhyath Maiya
Solution 3 Eduardo Coutinho

Related Questions