# Slider > Section: Atoms A range slider input. Source: https://design.formance.com/docs/components/slider **Example — `slider`:** ```tsx 'use client'; import { Slider } from '@/registry/default/ui/slider'; export default function SliderDemo() { return (

); } ``` ## Installation CLI Manual ```bash npx shadcn@latest add @formance/slider ``` Install the following dependencies: ```bash npm install radix-ui ``` Copy and paste the following code into your project. **Source — `slider.tsx`:** ```tsx 'use client'; import { Slider as SliderPrimitive } from 'radix-ui'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps) { const _values = React.useMemo( () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [value, defaultValue, min, max] ); return ( {Array.from({ length: _values.length }, (_, index) => ( ))} ); } export { Slider }; ``` Update the import paths to match your project setup. ## Usage ```tsx import { Slider } from '@/components/ui/slider' ``` ```tsx ``` ## Examples

**Example — `slider-range`:** ```tsx 'use client'; import { Slider } from '@/registry/default/ui/slider'; export default function SliderRangeExample() { return (

Transaction amount range

); } ```

Command Menu

Slider

Installation#

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

Examples#

Range#