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 >
Property Type Default Description valuestring'50'Current value. Single: "50". Dual: "25,75". minnumber0Minimum value maxnumber100Maximum value stepnumber1Step increment (0 for continuous) dualbooleanfalseEnable dual-thumb range selection orientation'horizontal' | 'vertical''horizontal'Layout orientation tooltip'none' | 'always' | 'drag''none'Tooltip display mode ticksbooleanfalseShow tick marks at every step showMinMaxbooleanfalseShow min/max labels showInputbooleanfalseShow linked numeric input fields variant'default' | 'filled' | 'gradient''default'Visual variant size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Component size disabledbooleanfalseDisable interaction ariaLabelstring | nullnullAccessible label
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.
