<round-slider>
MITJavaScript
A simple round slider web component built with Lit for customizable circular UI controls.
86 stars26 forks0 contributors
Overview
round-slider is a lightweight web component that provides a circular slider interface for selecting values within a defined range. It offers both single-value and dual-range (high/low) slider modes with extensive customization options.
Key Features
- Customizable Arc Geometry — Adjustable start angle and arc length for flexible circular layouts.
- Dual-Range Support — Handles both single-value and high/low range selections with separate controls.
- Accessibility Ready — Includes ARIA label properties for screen reader compatibility.
- CSS Customization — Fully stylable via CSS custom properties for colors, widths, and cursors.
- RTL Support — Built-in right-to-left layout option for internationalization.
- Interactive Events — Dispatches
value-changingandvalue-changedevents for real-time interaction.
Philosophy
The component prioritizes simplicity and flexibility, providing a minimal yet fully-featured circular slider that integrates seamlessly into modern web applications while maintaining accessibility standards.
Related Projects
Community-curated · Updated weekly · 100% open source
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
