🎚️ An opinionated range slider component for React built with Tailwind CSS.
First install the component in your project:
npm install fractionalrangeSince this component is built on top of TailwindCSS, you need to install it first. You can follow the official TailwindCSS installation guide. Then you need to add the following code to your tailwind.config.js file:
// tailwind.config.js
import { fractionalrange } from 'fractionalrange'
/** @type {import('tailwindcss').Config} */
export default {
content: [
// ...
'node_modules/fractionalrange/**/*.{js,jsx,ts,tsx}'
],
theme: {
extend: {},
},
plugins: [fractionalrange()],
}The final step is to add it into your app:
import FractionalRange from 'fractionalrange'
export function App() {
return (
<>
<FractionalRange
label='Range'
min={-1}
max={3}
step={0.02}
activeColor='#ff9646'
initialValue={1.2}
className="w-[300px]"
/>
</>
)
}FractionalRange has 5 different prebuilt layouts you can choose: none, indicator, shadows, values, and full. Each layout shows or hides different components.
-
None (default): Only renders the slider. -
Indicator: Renders the dot indictor below the slider. -
Shadows: Renders the shadows. -
Values: Renders a Title Bar which has the Label in the left and the current value on the right. -
Full: Renders all the components.
Most of this components are stylable using standard CSS or TailwindCSS.
export function App() {
return (
<>
<FractionalRange
label='Range'
min={-1}
max={3}
step={0.02}
activeColor='#ff9646'
initialValue={1.2}
layout="shadows"
/>
</>
)
}To style or extend any layout component, or add a totally new one:
import FractionalRange from 'fractionalrange'
import { CustomComponent } from './Custom.tsx'
export function App() {
return (
<>
<FractionalRange
label='Range'
min={-1}
max={3}
step={0.02}
activeColor='#ff9646'
initialValue={1.2}
>
<FractionalRange.IndicatorDot className="bottom-2"/>
<FractionalRange.Shadows/>
<CustomComponent/>
</FractionalRange>
</>
)
}| Property | Type | Default value | Description |
|---|---|---|---|
min |
number | 0 | The lowest value in the range allowed. |
max |
number | 2 | The greatest value in the range allowed. |
step |
number | 0.1 | The step between a value to the next or previous. |
label |
string | ReactNode | undefined | A string or React component that specifies the component's purpose. If this property is set as a string, it will be used for screen readers. Otherwise, you also need to specify an aria-label property. |
layout? |
'none' | 'indicator' | 'shadows' | 'values' | 'full' | 'none' | Determines what layout to use. |
value? |
number | undefined | The controlled current value. |
initialValue? |
number | undefined | The initial value when the component renders. |
onChange? |
(value: number) => void | undefined | A function to be called when the controlled value is updated. |
color? |
string | '#fff' | The main color. Will be used in the values and the not highlighted values. |
activeColor? |
string | '#fff' | The active color. Will be used in the highlighted ticks and the indicator. |
disabled? |
boolean | false | Determines if the component will be disabled to use. |
sound? |
string | undefined | A URL string of an audio file to reproduce every time the value changes. |
disableWillChange? |
boolean | false |
Determines if 'will-change' CSS property will be used to animate the slider (could cause performance issues if not used well).
|
fragmentClassName? |
string | undefined | Class name to be applied to each tick element. |
Properties marked with an '?' are optional.
Full documentation soon.
You're wellcome to contribute to the code, documentation or any topic you want to improve this project.
This component was inspired by Rauno Freiberg.