<nd-slider>

Several improvements over the native <input type=range>.

Features

• Editable spinner that shows the value or progress of the slider, displayed as a tooltip or inline
• Convenience methods

Examples

Basic

Simplest version:

<nd-slider></nd-slider>

You can also provide a specific slider element yourself so it can be easier to style or customize:

<nd-slider>
	<input type=range>
</nd-slider>

You can also provide a specific element for the value:

<nd-slider>
	<sl-format-number slot="value" type="currency" currency="USD"></sl-format-number>
</nd-slider>

If it has a value property it will be assumed to be editable, otherwise it will be read-only.

All usual slider attributes work and are simply copied to the slider and spinner elements:

<nd-slider min="-180" max="180" step="0.01"></nd-slider>

You are encouraged to provide a slider with the right attributes from the start, to minimize updates.

By default the number is shown as a read/write tooltip, but you can make it display inline:

<nd-slider style="--value-position: end"></nd-slider>

Yes, this is a regular CSS property that you can even set in your stylesheet. It requires style queries, which means at the time of this writing, it won’t work in Firefox.

By default shown is the slider value, but you can switch to showing (and editing) the progress instead:

<nd-slider show="progress"></nd-slider>

Properties and methods

In addition to the usual properties and methods of a slider (min, max, step, value, defaultValue), the following are available:

• show: Whether to show the value or the progress. Possible values: value, progress. Default: value.
• valueElement: The element that shows the value.
• sliderElement: The element that is the slider.
• progress: The progress of the slider, as a number between 0 and 1.
• progressAt(value): Returns the progress at a given point, as a number between 0 and 1.
• valueAt(progress): Returns the value at a given progress, as a number between min and max.

<script src="https://nudeui.com/elements/nd-slider/nd-slider.js" type="module"></script>