Skip to main content
Version: 1.0.3

Slider

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.

50%

Installation​

ignix add component 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}
    />
  );
}

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"
/>

Props​

Slider​

PropTypeDefaultDescription
variant'default' | 'minimal' | 'rounded' | 'gradient' | 'glass' | 'outline' | 'shadow' | 'neon' | 'material' | 'neumorphic' | 'retro' | 'cyberpunk' | 'brutalist' | 'skeuomorphic''default'Visual style of the slider.
animationType'none' | 'slide' | 'fade' | 'zoom' | 'spring' | 'elastic' | 'parallax' | 'flip' | 'morph' | 'hover' | 'pulse' | 'breathe' | 'wave' | 'rainbow' | 'bounce''none'Animation applied to the slider elements.
animationDurationnumber0.3Duration of the animation in seconds.
size'sm' | 'md' | 'lg''md'Controls the size of the slider and thumb.
showValuebooleanfalseDisplays the current slider value below the component.
valuePrefixstring''Prefix text shown before the value.
valueSuffixstring''Suffix text shown after the value.
showTooltipbooleanfalseDisplays a tooltip above the thumb showing the value while hovering.
glowEffectbooleanfalseAdds a glow shadow effect to the slider range.
trackClassNamestring-Custom className for the slider track.
rangeClassNamestring-Custom className for the filled range.
thumbClassNamestring-Custom className for the slider thumb.
valueClassNamestring-Custom className for the value display element.
classNamestring-Additional className applied to the slider root.

Radix Slider Props​

The component also supports all props from Radix UI Slider Primitive.

PropTypeDefaultDescription
valuenumber[]-Controlled slider value.
defaultValuenumber[][0]Initial value for uncontrolled usage.
minnumber0Minimum slider value.
maxnumber100Maximum slider value.
stepnumber1Step interval for value changes.
onValueChange(value: number[]) => void-Callback triggered when slider value changes.
disabledbooleanfalseDisables slider interaction.