[solved] How to customize the range Form Component in Bootstrap?

[xtiansimon]

I’m reading from the SitePoint Library several of the Bootstrap for beginners books. Now, I’m mocking up a form with all of the Form Components (radio buttons, menus, etc.)

The defaults for the range component from Bootstrap v4.3.:

• start is in the middle
• there is no value display

How do I change the defaults?

• slider start at far left (IE. position 0 of a (0,10) range)
• display updating value

The code snippet from getBootstrap shows class properties for min, max, step–Are there others that accomplish what I want?

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Here is an example of what I want from CodePen. But, I don’t want to cargo-cult my page with code I don’t understand, when maybe I can achieve what I want from vanilla bootstrap??

[PaulOB]

@xtiansimon

How do I change the defaults?

You set the position of the slider using the value attribute. e.g. value=“0” would be at the left. I don’t believe bootstrap4 has any js to update the value so you will have to customise that yourself. (I believe bootstrap3 had a range slider plugin of sorts).

You can see examples here which are much like the codepen you posted but should be a bit clearer to understand.

https://html.form.guide/html-form/html5-input-type-range.html