Add styling for <input type="range">

[bhutaninitin]

No description provided.

[cvrebert]

This would fall under the "Custom form elements" (http://v4-alpha.getbootstrap.com/components/forms/#custom-forms ) and would be particularly challenging since it'd require JavaScript.

[bhutaninitin]

Javascript would be nice but only styling would be much helpful. If a project has input type=range component, it will stand out due to lack of css style.

<input type="range" min="0" max="100" value="0" step="20" name="result" list="grade">
<datalist id="grade">
<option value="0">
<option value="40">
<option value="60">
<option value="80">
</datalist>

[gastlich]

Since bootstrap v4 has dropped support for IE8 and range input is supported in IE10+ there is quite reasonable way to do it without any javascript code:

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

It could look like this:

The question is if it's worth doing? It involves quite a lot of code specified for almost every browser engine....

For me custom styling would be helpfull, but will it be usefull for the rest of users?

[bhutaninitin]

This example doesn't seem (to me) to include the styling for the step attribute.

[gastlich]

Are you talking about step attribute + datalist element, to generate ticks for sliders?

Currently native styling for datalists is unstable and it's support is weak. But what can be done to style these ticks, is to use datalist as a standard markup and generate manually these ticks using plain css. I've done this using flex and space-between justification.

[bhutaninitin]

Sounds interesting. Can you post an example?

[gastlich]

This is very quick example how it was done:

https://jsbin.com/mozirozasi/edit?html,css,output

I know that it's not pixel perfect and so on, and I didn't hide datalist values in a proper way, but I haven't got enough time.

The most interesting part for you is follwing:

datalist {
  display: flex;
  justify-content: space-between;
}

[bhutaninitin]

Thanks for the example. I hope something related to this comes with the next bootstrap.

[bhutaninitin]

Hi,
Just dropping a note to check if anything related to input type="range" is coming in bootstrap 4.

Thanks,
Nitin

[mdo]

Custom range was added in #25600.