<wa-slider>

Sliders let users choose a numeric value within a defined range by dragging a thumb along a track.

Category

Forms

Built with

Lit

Library

Web Awesome

Author

Web Awesome

Package

@awesome.me/webawesome

Component size

25.5 kB JS (minified + gzipped, JS includes dependencies beyond the library)

Library size

8.2 kB JS (shared by every Web Awesome component, loaded once per page)

Popular

5 out of 5

Downloads

364,100/week · jsDelivr 33,114,338 hits/month (whole @awesome.me/webawesome package)

GitHub stars

1,348

Latest stable version

3.14.0

License

MIT

Status

stable

• Documentation
• Demo
• Source code

Attributes

• label
• hint
• name
• min-value
• max-value
• value
• range
• disabled
• readonly
• orientation
• size
• indicator-offset
• min
• max
• step
• autofocus
• tooltip-distance
• tooltip-placement
• with-markers
• with-tooltip
• with-label
• with-hint
• custom-error
• dir
• lang
• did-ssr

Slots

• label
• hint
• reference

Events

• change
• blur
• focus
• input
• wa-invalid

CSS Parts

• label
• hint
• slider
• track
• indicator
• markers
• marker
• references
• thumb
• thumb-min
• thumb-max
• tooltip
• tooltip__tooltip
• tooltip__body
• tooltip__arrow