Back to site

Range

Slider input for selecting a numeric value within a range.

50 
---
import Range from "@forms/range/Range.astro";
---

<Range label="Volume" max={100} min={0} name="volume" showValue step={1} value={50} />
---
blocks:
  _component: building-blocks/forms/range
  label: Volume
  name: volume
  min: 0
  max: 100
  step: 1
  value: 50
  showValue: true
---

Overview #

A slider input for selecting a numeric value within a defined minimum and maximum range. Supports configurable step size, a default value, and an optional live value display beside the label.

Properties #

label string | default: My range

The label text for the range field.

name string | default: my_range

The name attribute for the range field.

min number | default: 0

The minimum value of the range.

max number | default: 100

The maximum value of the range.

step number | default: 1

The step increment between values.

value number | default: 50

The default value for the range field.

required boolean | default: false

Whether the field is required.

showValue boolean | default: true

Whether to display the current value next to the label.

Examples #

Show/hide value #

50 
---
import Range from "@forms/range/Range.astro";
---

<Range label="Volume" max={100} min={0} name="volume" showValue step={1} value={50} />
---
blocks:
  _component: building-blocks/forms/range
  label: Volume
  name: volume
  min: 0
  max: 100
  step: 1
  value: 50
  showValue: true
---
---
import Range from "@forms/range/Range.astro";
---

<Range label="Brightness" max={100} min={0} name="brightness" step={1} value={75} />
---
blocks:
  _component: building-blocks/forms/range
  label: Brightness
  name: brightness
  min: 0
  max: 100
  step: 1
  value: 75
  showValue: false
---

Constraints #

5 
---
import Range from "@forms/range/Range.astro";
---

<Range label="Rating" max={10} min={0} name="rating" showValue step={0.5} value={5} />
---
blocks:
  _component: building-blocks/forms/range
  label: Rating
  name: rating
  min: 0
  max: 10
  step: 0.5
  value: 5
  showValue: true
---
20 
---
import Range from "@forms/range/Range.astro";
---

<Range label="Temperature (°C)" max={40} min={-20} name="temperature" showValue step={1} value={20} />
---
blocks:
  _component: building-blocks/forms/range
  label: Temperature (°C)
  name: temperature
  min: -20
  max: 40
  step: 1
  value: 20
  showValue: true
---

Required #

5 
---
import Range from "@forms/range/Range.astro";
---

<Range label="Satisfaction" max={10} min={0} name="satisfaction" required showValue step={1} value={5} />
---
blocks:
  _component: building-blocks/forms/range
  label: Satisfaction
  name: satisfaction
  min: 0
  max: 10
  step: 1
  value: 5
  required: true
  showValue: true
---