Slider

A range slider input for collecting numeric values within a defined range. Configure with sliderMin, sliderMax, sliderStep, and optional unit and scale labels.

Schema Example

sliderjson

{
  id: "satisfaction",
  type: "slider",
  label: "How satisfied are you?",
  sliderMin: 0,
  sliderMax: 100,
  sliderStep: 5,
  unit: "%",
  showValue: true,
  minLabel: "Not satisfied",
  maxLabel: "Very satisfied"
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
sliderMin	number	Minimum value of the slider. Defaults to `0`.
sliderMax	number	Maximum value of the slider. Defaults to `100`.
sliderStep	number	Step increment for the slider. Defaults to `1`.
unit	string	Unit label displayed after the value (e.g. `"%"`, `"kg"`, `"px"`).
showValue	boolean	Whether to display the current numeric value next to the slider. Defaults to `true`.
minLabel	string	Descriptive label shown at the low end of the scale.
maxLabel	string	Descriptive label shown at the high end of the scale.
required	boolean	Whether a value must be selected.
defaultValue	number	Pre-selected slider value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Custom validation rules. Use `min` / `max` rules for value-based validation.

With Validation

Slider with validationjson

{
  id: "budget",
  type: "slider",
  label: "Monthly budget",
  sliderMin: 100,
  sliderMax: 10000,
  sliderStep: 100,
  unit: "$",
  validation: [
    { type: "min", value: 500, message: "Minimum budget is $500" },
    { type: "max", value: 5000, message: "Maximum budget is $5000" }
  ]
}

Configurations

Various slider configurations for different use cases:

Slider configurationsjson

// Percentage slider (0-100)
{
  id: "progress",
  type: "slider",
  label: "Project completion",
  sliderMin: 0,
  sliderMax: 100,
  sliderStep: 5,
  unit: "%"
}

// Temperature slider
{
  id: "temp",
  type: "slider",
  label: "Preferred room temperature",
  sliderMin: 60,
  sliderMax: 85,
  sliderStep: 1,
  unit: "°F",
  minLabel: "Cool",
  maxLabel: "Warm"
}

// Without value display
{
  id: "effort",
  type: "slider",
  label: "How much effort did this take?",
  sliderMin: 1,
  sliderMax: 10,
  showValue: false,
  minLabel: "Very easy",
  maxLabel: "Very hard"
}

Answer Format

Returns a number between sliderMin and sliderMax (inclusive), representing the selected value on the slider.

Practical Example

Advanced Example

A product configuration form using sliders:

ProductConfig.tsxtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const configSchema: SurveySchema = {
  id: 'product-config',
  title: 'Configure Your Plan',
  pages: [
    {
      id: 'settings',
      questions: [
        {
          id: 'storage',
          type: 'slider',
          label: 'Storage',
          sliderMin: 5,
          sliderMax: 100,
          sliderStep: 5,
          unit: ' GB',
          minLabel: '5 GB',
          maxLabel: '100 GB',
          required: true,
        },
        {
          id: 'users',
          type: 'slider',
          label: 'Number of team members',
          sliderMin: 1,
          sliderMax: 50,
          sliderStep: 1,
          showValue: true,
        },
        {
          id: 'budget',
          type: 'slider',
          label: 'Monthly budget',
          sliderMin: 0,
          sliderMax: 500,
          sliderStep: 10,
          unit: '$',
          minLabel: 'Free',
          maxLabel: '$500/mo',
        },
      ],
    },
  ],
  settings: { submitText: 'Get Quote' },
};

function ProductConfig() {
  return (
    <SurveyRenderer
      schema={configSchema}
      options={{
        onSubmit: async (answers) => {
          // answers.storage → 50, answers.users → 10, answers.budget → 200
          console.log('Configuration:', answers);
        },
      }}
    />
  );
}