Menu
I have an <input type=range> with 60000 steps.
I need the caret to jump to the middle when it is moved close to the middle. How can I do that?
I am using the Angular and jQuery libraries.
271
The max attribute specifies the maximum value for an <input> element. Tip: Use the max attribute together with the min attribute to create a range of legal values. Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.
For Chrome, use -webkit-appearance: slider-vertical . For IE, use writing-mode: bt-lr . For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way.
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).
To style the range input with CSS you'll need to apply styles to two pseudo-elements: ::-webkit-slider-thumb and ::-webkit-slider-runnable-track . Find out how you can apply custom styling and make the range input more functional and appealing. Contents of the article: CSS selectors for the range input.
There is a HTML5 feature that provides detent-snapping natively, using the list attribute and matching datalist element. Each element in the list becomes a detent point in the slider, with a tick-mark as well as snapping.
<input type="range" value="0" min="0" max="60000" step="1" list="my-detents">
<datalist id="my-detents">
<option value="30000">
</datalist>The datalist element can be placed anywhere in the HTML; it’s just defining the list (here named my-detents) for use by the input element.
According to MDN and caniuse.com, as of February 2019, use of datalist with range inputs is supported by Chrome, IE, Edge, and preview versions of Safari. (Firefox supports datalist for text inputs only.)
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
