A range/slider component supporting single and dual-thumb selection, vertical orientation, stepped and continuous modes, tooltips, tick marks, and linked numeric inputs.
Show code Copy < nana-range label = "Volume" min = "0" max = "100" value = "50" style = "min-width:16rem" ></ nana-range >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/range " ;
< nana-range label = " Volume " min = " 0 " max = " 100 " value = " 50 " style = " min-width:16rem " ></ nana-range >
Show code Copy < nana-range min = "0" max = "100" value = "25" size = "sm" style = "min-width:16rem" ></ nana-range > < nana-range min = "0" max = "100" value = "50" size = "md" style = "min-width:16rem" ></ nana-range >
Show code Copy < nana-range min = "0" max = "100" value = "25,75" dual style = "min-width:16rem" ></ nana-range > < nana-range min = "0" max = "100" value = "50" ticks show-min-max style = "min-width:16rem" ></ nana-range > < nana-range min = "0" max = "100" value = "40" disabled style = "min-width:16rem" ></ nana-range >
The variant attribute sets the track fill — default, filled, or gradient.
Show code Copy < nana-range min = "0" max = "100" value = "50" variant = "default" style = "min-width:16rem" ></ nana-range > < nana-range min = "0" max = "100" value = "50" variant = "filled" style = "min-width:16rem" ></ nana-range > < nana-range min = "0" max = "100" value = "50" variant = "gradient" style = "min-width:16rem" ></ nana-range >
Properties Property Attribute Type Default Description ariaLabelaria-labelstring | nullnullAccessible label disabled— booleanfalseDisable interaction dual— booleanfalseEnable dual-thumb range selection max— number100Maximum value min— number0Minimum value orientation— RangeOrientation'horizontal'Layout orientation showInputshow-inputbooleanfalseShow linked numeric input fields showMinMaxshow-min-maxbooleanfalseShow min/max labels size— Size'md'Component size step— number1Step increment (0 for continuous) ticks— booleanfalseShow tick marks at every step tooltip— RangeTooltip'none'Tooltip display mode value— string'50'Current value. Single: `"50"`. Dual: `"25,75"`. variant— RangeVariant'default'Visual variant
Events Event Description nana-changeFired when value settles (`detail.value` — string or {min, max}) nana-inputFired while dragging (`detail.value`)
Slots Slot Description (default)Custom content (appears below the slider) prefixContent before the slider suffixContent after the slider
CSS parts Part Description ::part(base)The root container ::part(track)The track element ::part(fill)The active fill portion ::part(thumb)A draggable handle ::part(tooltip)The value tooltip
CSS custom properties Property Description --nana-range-track-heightTrack thickness (default: 6px) --nana-range-thumb-sizeThumb diameter (default: 20px) --nana-range-track-bgTrack background --nana-range-fill-bgFill colour --nana-range-thumb-bgThumb background --nana-range-thumb-radiusThumb shape (default: 50%) --nana-range-tooltip-bgTooltip background --nana-range-tooltip-colorTooltip text colour --nana-range-gradient-fromGradient start (variant="gradient") --nana-range-gradient-toGradient end (variant="gradient")
Event Type Description nana-changeCustomEventFired when value settles (detail.value — string or {min, max}) nana-inputCustomEventFired while dragging (detail.value)
Slot Description (default)Custom content (appears below the slider) prefixContent before the slider suffixContent after the slider
Variable Default Description --nana-range-track-height— Track thickness (default: 6px) --nana-range-thumb-size— Thumb diameter (default: 20px) --nana-range-track-bg— Track background --nana-range-fill-bg— Fill colour --nana-range-thumb-bg— Thumb background --nana-range-thumb-radius— Thumb shape (default: 50%) --nana-range-tooltip-bg— Tooltip background --nana-range-tooltip-color— Tooltip text colour --nana-range-gradient-from— Gradient start (variant=“gradient”) --nana-range-gradient-to— Gradient end (variant=“gradient”)
Part Description baseThe root container trackThe track element fillThe active fill portion thumbA draggable handle tooltipThe value tooltip
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Range interactively Every state, prop, and edge case — with live controls — in Storybook.
