React Round Slider
Experience an accessible and mobile-friendly React Round Slider library, powered by TypeScript and SVG
ES6/TypeScript
Precision and Flexibility
Benefit from TypeScript's strong typing and enjoy the flexibility to customize your slider with SVG elements, creating a slider that perfectly suits your needs.
Learn more
const [pointers, setPointers] = useState<ISettingsPointer[]>([
{ value: 0, radius: 25, bgColor: '#c20cff' },
{ value: 25, radius: 20, bgColor: '#4be28c' }
]);
return (
<RoundSlider
pointers={ pointers }
onChange={ setPointers }
/>
);
Knobs
Multiple Pointers
The library support any number of pointers (knobs/handles). You can fine-tune each pointer's appearance, color, and behavior with ease, adapting the slider to fit your unique project requirements.
Learn moreSVG
Sleek Design with SVG
Leverage the power of SVG (Scalable Vector Graphics) to achieve sharp, high-quality visuals that scale effortlessly across devices, from desktops to mobile.
Learn more
<RoundSlider
pathStartAngle={ 0 }
pathEndAngle={ 180 }
pathRadius={ 150 }
pathThickness={ 15 }
pathBgColor={ '#efefef' }
pathInnerBgColor={ '#efefef' }
pathBorder={ 2 }
pathBorderColor={ '#28586c' }
textOffsetY={ 70 }
textFontSize={ 24 }
pointers={ pointers }
/>
Data
Numbers, Text, or Range
The slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both text and numeric data are supported.
Learn moreStyles
Styles, Design, Animation
The library has multiple options for customizing the appearance of the slider. Circle radius, start & end angles, border size, colors, hover and focus, and other properties can be customized using the slider attributes. Custom SVGs can be used as pointers, and there is an on-click animation.
Learn moreAdvanced
Advanced Features
The slider has a large set of advanced features such as: the ability to disable the entire slider or individual knobs; range dragging support; pointers overlap, and more.
Learn moreCSS Frameworks
Framework Agnostic
From Bootstrap to Tailwind CSS, Material UI or Bulma - the slider plays well with any CSS framework or custom styles.
Learn more
Image by Vectorportal.com, CC BY