// Generated by scripts/generate-showcase.mjs. Do not edit directly. page RangeSliderDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "range-slider-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "range-sliderField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Volume" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter range slider" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_value = ctx.url.searchParams.get("pg_value") ?? "60" state playground_min = ctx.url.searchParams.get("pg_min") ?? "0" state playground_max = ctx.url.searchParams.get("pg_max") ?? "100" state playground_step = ctx.url.searchParams.get("pg_step") ?? "5" state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true" state playground_showBounds = ctx.url.searchParams.get("pg_showBounds") ?? "true" state playground_showSteps = ctx.url.searchParams.get("pg_showSteps") ?? "false" state playground_marks = ctx.url.searchParams.get("pg_marks") ?? "[]" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field." state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Range Slider" description = "Theme-aware, responsive range slider component." } view {
Forms component

Range Slider

Theme-aware, responsive range slider component.

26 props0 slots4 eventsTheme readyResponsive
Interactive playground

Configure Range Slider

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<RangeSlider
  id="range-slider-1"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  helperText="Helpful context for this field."
/>
Component props26 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default field

Use a labelled field with a value, placeholder, and supporting helper text.

01
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-1"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  helperText="Helpful context for this field."
/>
Appearance

Outlined with start icon

Combine an outlined treatment with a leading icon.

02
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-2"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  variant="outlined"
  icon="icon-[lucide--sparkles]"
  value="60"
  step="5"
  showSteps="true"
  marks='[
    {
      "value": 0,
      "label": "0"
    },
    {
      "value": 25,
      "label": "25"
    },
    {
      "value": 50,
      "label": "50"
    },
    {
      "value": 75,
      "label": "75"
    },
    {
      "value": 100,
      "label": "100"
    }
  ]'
/>
Appearance

Floating label

Move the label into the control while preserving an accessible field name.

03
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-3"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  variant="floating"
  icon="icon-[lucide--circle-user-round]"
  iconPosition="end"
  value="60"
  step="5"
  marks='[]'
/>
Appearance

Pill and compact size

Use pill styling and compact sizing in dense interfaces.

04
Live preview
Component usage.wrn
<RangeSlider
  size="sm"
  id="range-slider-4"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  variant="pill"
  value="60"
  step="5"
  marks='[]'
/>
States

Read only

Display a submitted value without allowing it to be changed.

05
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-5"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  readonly="true"
/>
States

Disabled

Prevent interaction and communicate that the field is unavailable.

06
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-6"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  disabled="true"
/>
Layout

Inline helper text

Place the label, control, and supporting text on one responsive line.

07
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-7"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  helperText="We'll never share your details."
  inline="true"
/>
Layout

Field with corner hint

Place optional context opposite the label and keep the control on the next line.

08
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-8"
  name="range-sliderField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  cornerHint="Optional"
/>
Validation

Validated field

Surface validation through @wrnexus/validation-compatible error targets and accessible state.

09
Live preview
Component usage.wrn
<RangeSlider
  id="range-slider-9"
  name="validatedField"
  label="Volume"
  placeholder="Enter range slider"
  value="60"
  step="5"
  marks='[]'
  required="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Range"No
hiddenLabelbooleanfalseNo
placeholderstring""No
variantstring"normal"No
iconstring""No
iconPositionstring"start"No
valuenumber50No
minnumber0No
maxnumber100No
stepnumber1No
showValuebooleantrueNo
showBoundsbooleantrueNo
showStepsbooleanfalseNo
marksstring[]No
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
} }