🎚️ 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

Properties marked with an '?' are optional.

Documentation

Full documentation soon.

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.