// 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") ?? "" state playground_name = ctx.url.searchParams.get("pg_name") ?? "" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider" state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" 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 = Number(ctx.url.searchParams.get("pg_value") ?? "36") state playground_min = Number(ctx.url.searchParams.get("pg_min") ?? "0") state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100") state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1") state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true" state playground_showBounds = (ctx.url.searchParams.get("pg_showBounds") ?? "true") === "true" state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "true") === "true" state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[{\"id\":\"range-slider-0-1\",\"key\":\"range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"range-slider-0-2\",\"key\":\"range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" 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") === "true" state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" 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
  label="Range Slider"
  placeholder="Enter a sample value"
  value="36"
  showSteps="true"
  marks='[
    {
      "id": "range-slider-0-1",
      "key": "range-slider-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "range-slider-0-2",
      "key": "range-slider-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Event outputInteract with the preview to inspect event.detail.
Component props26 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

01
Live preview
Component usage.wrn
<RangeSlider
  label="Range Slider"
  placeholder="Enter a sample value"
  value="36"
  showSteps="true"
  marks='[
    {
      "id": "range-slider-0-1",
      "key": "range-slider-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "range-slider-0-2",
      "key": "range-slider-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

02
Live preview
Component usage.wrn
<RangeSlider
  size="sm"
  label="Compact example"
  placeholder="Enter a sample value"
  variant="secondary"
  icon="icon-[lucide--arrow-right]"
  value="60"
  showSteps="true"
  marks='[
    {
      "id": "range-slider-1-1",
      "key": "range-slider-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "range-slider-1-2",
      "key": "range-slider-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

03
Live preview
Component usage.wrn
<RangeSlider
  size="lg"
  label="Advanced example"
  placeholder="Search by name, email, or identifier"
  variant="success"
  icon="icon-[lucide--trash-2]"
  value="84"
  showSteps="true"
  marks='[
    {
      "id": "range-slider-2-1",
      "key": "range-slider-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "range-slider-2-2",
      "key": "range-slider-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#range-slider-demo",
      "actionHref": "#range-slider-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
/>
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@inputFires as the editable value changes.
@changeFires when the component's committed value or selection changes.
@focusFires when the interactive control receives focus.
@blurFires when focus leaves the interactive control.
Declarative handlers.wrn
<RangeSlider
  @input='console.log(event.detail)'
  @change='console.log(event.detail)'
  @focus='console.log(event.detail)'
  @blur='console.log(event.detail)'
/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"RangeSlider\"], [data-component=\"RangeSlider\"]")

component?.addEventListener("input", (event) => {
  console.log("input", event.detail)
})

component?.addEventListener("change", (event) => {
  console.log("change", event.detail)
})

component?.addEventListener("focus", (event) => {
  console.log("focus", event.detail)
})

component?.addEventListener("blur", (event) => {
  console.log("blur", 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
} }