Slider

/**
 * Slider Field Demo - Interactive examples of slider variants
 */

import { Form, FormBuilder } from '@saastro/forms';

import { FormProvider } from '@/components/FormProvider';
import { TooltipProvider } from '@/components/ui/tooltip';

const config = FormBuilder.create('slider-demo')
  .layout('manual')
  .columns(12)
  .addField('volume', (f) =>
    f
      .type('slider')
      .label('Volume')
      .helperText('Adjust the volume level')
      .range(0, 100, 1)
      .value([75])
      .showValue(true)
      .showLabels(true)
      .valueFormat('{value}%')
      .required()
      .columns({ default: 12 }),
  )
  .addField('priceRange', (f) =>
    f
      .type('slider')
      .label('Price Range')
      .helperText('Select minimum and maximum price')
      .range(0, 1000, 10)
      .sliderVariant('range')
      .value([200, 800])
      .showValue(true)
      .showLabels(true)
      .valueFormat('${value}')
      .required()
      .columns({ default: 12 }),
  )
  .addField('rating', (f) =>
    f
      .type('slider')
      .label('Rating')
      .helperText('Rate from 1 to 5 stars')
      .range(1, 5, 1)
      .value([3])
      .showValue(true)
      .showLabels(true)
      .valueFormat('{value} ★')
      .required()
      .columns({ default: 12, md: 6 }),
  )
  .addField('temperature', (f) =>
    f
      .type('slider')
      .label('Temperature')
      .helperText('Set target temperature')
      .range(-10, 40, 1)
      .value([22])
      .showValue(true)
      .showLabels(true)
      .valueFormat('{value}°C')
      .required()
      .columns({ default: 12, md: 6 }),
  )
  .addStep('main', ['volume', 'priceRange', 'rating', 'temperature'])
  .build();

export default function SliderDemo() {
  const handleSubmit = (data: Record<string, unknown>) => {
    console.log('Form submitted:', data);
    alert('Form submitted! Check console for data.');
  };

  return (
    <TooltipProvider>
      <FormProvider>
        <Form config={config} onSubmit={handleSubmit} className="space-y-6" />
      </FormProvider>
    </TooltipProvider>
  );
}

Overview

The slider field provides a visual way to select numeric values. It supports three variants:

• default - Single thumb for selecting one value
• range - Two thumbs for selecting a min/max range
• multi - Multiple thumbs for selecting multiple values

Usage

Single Value (Default)

import { FormBuilder } from '@saastro/forms';

const config = FormBuilder.create('settings')
  .addField('volume', (f) =>
    f
      .type('slider')
      .label('Volume')
      .range(0, 100, 1)
      .value([50])
      .showValue(true)
      .valueFormat('{value}%')
      .required(),
  )
  .addStep('main', ['volume'])
  .build();

Range Selection

.addField('priceRange', (f) =>
  f.type('slider')
    .label('Price Range')
    .range(0, 1000, 10)
    .sliderVariant('range')
    .value([200, 800])
    .showLabels(true)
    .showValue(true)
    .valueFormat('${value}')
)

Multi-Thumb

.addField('breakpoints', (f) =>
  f.type('slider')
    .label('Breakpoints')
    .range(0, 100, 5)
    .sliderVariant('multi')
    .thumbCount(4)
    .value([20, 40, 60, 80])
    .showValue(true)
)

Vertical Orientation

.addField('temperature', (f) =>
  f.type('slider')
    .label('Temperature')
    .range(-20, 40, 1)
    .sliderOrientation('vertical')
    .showValue(true)
    .valueFormat('{value}°C')
)

Props

Value Format Examples

.valueFormat('${value}')    // Shows "$50"
.valueFormat('{value}%')    // Shows "75%"
.valueFormat('{value}°C')   // Shows "22°C"
.valueFormat('{value} pts') // Shows "100 pts"

Validation

With FormBuilder

.addField('rating', (f) =>
  f.type('slider')
    .label('Rating')
    .range(1, 5, 1)
    .required('Please select a rating')
    .numberRange(1, 5)
)

With Zod Schema

import { z } from 'zod';

.addField('rating', (f) =>
  f.type('slider')
    .label('Rating')
    .range(1, 5, 1)
    .schema(z.array(z.number().min(1).max(5)))
)

Styling

Custom Classes

.addField('volume', (f) =>
  f.type('slider')
    .label('Volume')
    .range(0, 100, 1)
    .classNames({
      wrapper: 'bg-muted/30 p-4 rounded-lg',
      input: 'accent-primary',
      label: 'text-lg font-medium',
      helper: 'text-xs text-muted-foreground',
    })
)

Responsive Layout

.addField('volume', (f) =>
  f.type('slider')
    .label('Volume')
    .range(0, 100, 1)
    .columns({ default: 12, md: 6 })
)

JSON Styling

{
  "type": "slider",
  "label": "Volume",
  "min": 0,
  "max": 100,
  "wrapper_className": "bg-muted/30 p-4 rounded-lg",
  "label_className": "text-lg font-medium",
  "columns": { "default": 12, "md": 6 }
}

Accessibility

• Uses Radix UI Slider for accessibility
• Supports keyboard navigation (arrow keys)
• Announces value changes to screen readers
• Focus visible states
• Step increments work with keyboard navigation