How can I change the size of bootstrap slider?

Question

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.

Answer 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.