How can I make a range slider with different values?

Answer 1

I assume that "different values" mean hashmarks and labels, so here are my 2 cents.

There's an HTML value called "range" and it's added to the <input> element via the type attribute.

Here's how it looks:

<input type="range">

That's it basically.

However, the range slider has many other attributes that make it much more usable. Here's a more detailed range slider:

<input type="range" min="5" max="10" step=".5">

As you can see we are introducing a few more attributes:

1. min: The minimum value.
2. max: The maximum value.
3. step: The amount of steps the slider can increase/decrease its value.

There are many more attributes and ways to rotate the slider for a vertical format. Browser support is pretty decent for a basic slider, but for example, Firefox doesn't support hashmarks (the little lines along the slider) and labels (like 0% - 50% - 100%, etc.). While Chrome does support hashmarks but does not support labels.

More information in the Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range