Slider

Overview

The Slider component is a highly customizable input element that allows users to select a value within a range. Built with Radix UI and Framer Motion, it offers various styles, animations, and interactive features.

Preview

Preview

50%

Code

import { Slider } from './components/ui';

function SliderDemo() {
  return (
    <Slider
      defaultValue={[50]}
      max={100}
      step={1}
      variant="default"
      showValue
      valueSuffix="%"
    />
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add slider

yarn

yarn @mindfiredigital/ignix-ui add slider

pnpm

pnpm @mindfiredigital/ignix-ui add slider

Usage

Import the component:

import { Slider } from './components/ui';

Basic Usage

function BasicSlider() {
  const [value, setValue] = useState([50]);
  
  return (
    <Slider
      value={value}
      onValueChange={setValue}
      max={100}
      step={1}
    />
  );
}

Variants

Preview

50%

Code

import { Slider } from '@ignix-ui/slider';

<Slider
  key={"default-slide"}
  defaultValue={[50]}
  max={100}
  step={1}
  variant="default"
  animationType="slide"
  showValue
  valueSuffix="%"
  orientation="horizontal"
/>

Custom Range Values

Create a slider with custom range and step values:

<Slider
  defaultValue={[0]}
  min={-50}
  max={50}
  step={5}
  showValue
  valuePrefix="Temperature: "
  valueSuffix="°C"
/>