🎚️ An opinionated range slider component for React built with Tailwind CSS.

Usage

First install the component in your project:

npm install fractionalrange

Since 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]"
      />
    </>
  )
}

---

Layouts

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>
    </>
  )
}

Props

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.

Contribute

You're wellcome to contribute to the code, documentation or any topic you want to improve this project.

Acknowledgments

This component was inspired by Rauno Freiberg.