react-slider

import React from 'react'; import ReactDOM from 'react-dom/client'; import Slider from 'react-slider'; // Basic inline styles for demonstration. In a real app, use CSS classes. const thumbStyle = { height: '25px', width: '25px', backgroundColor: '#555', borderRadius: '50%', cursor: 'grab', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontSize: '0.8em' }; const trackStyle = (state, props) => ({ top: '0', bottom: '0', background: props.index === 1 ? '#ddd' : '#007bff', borderRadius: '5px' }); const sliderContainerStyle = { width: '80%', margin: '50px auto', height: '25px', background: '#eee', borderRadius: '5px', display: 'flex', alignItems: 'center', }; function App() { const [value, setValue] = React.useState(50); const [rangeValues, setRangeValues] = React.useState([25, 75]); return ( <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}> <h1>React Slider Examples</h1> <h2>Single Handle Slider</h2> <div style={sliderContainerStyle}> <Slider value={value} onChange={setValue} renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />} renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>} min={0} max={100} step={1} ariaLabel="Single value slider" /> </div> <p>Current Value: {value}</p> <h2>Range Slider</h2> <div style={sliderContainerStyle}> <Slider value={rangeValues} onChange={setRangeValues} renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />} renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>} min={0} max={100} step={1} ariaLabel={['Min value slider', 'Max value slider']} pearling minDistance={10} /> </div> <p>Current Range: [{rangeValues[0]}, {rangeValues[1]}]</p> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div')); root.render(<App />);