Forms Plugin

GS Range

Range slider with single/range/multiple thumbs, marks, tooltips, vertical mode, connect fill, keyboard control and RTL.

Latest: v1.0.2

Downloads last month: 175

Visit Demo Website

Install Package

npm i @get-set/gs-range

or via CDN

<link rel="stylesheet" href="https://cdn.get-set.it/gs-range/latest/gs-range.min.css">
<script src="https://cdn.get-set.it/gs-range/latest/gs-range.min.js"></script>

Interactive Playground

Live Sandbox

Range.jsx

import Range from '@get-set/gs-range';

export default function App() {
  return (
    <Range>
      <div className="content">Your Range content</div>
    </Range>
  );
}

import Range from '@get-set/gs-range';

export default function App() {
  return (
    <Range>
      <div className="content">Your Range content</div>
    </Range>
  );
}

Live Preview

Options

Configuration Values

Reference

Min

Max

Step

Mode

Value

Default Value

Marks

Tooltip

Tooltip Placement

Min Gap

Decimals

Keyboard Step

Page Step

Theme

Accent Color

Size

Class Name

Aria Label

Feature Flags

ConnectSnap To MarksVerticalRtlDisabledRead OnlyPushableReduced Motion

API Specifications

Option	Type	Default	Description
reference	string	none	Reference.
min	number	0	Lowest selectable value. Default: 0.
max	number	100	Highest selectable value. Default: 100.
step	number	1	Snap increment. Default: 1. `0` allows continuous values.
mode	GSRangeMode	'single'	Slider mode: `single` (number), `range` (two thumbs, tuple) or `multiple` (N thumbs, array). Default: 'single'.
value	GSRangeValue	none	Initial value. A number for `single`, a `[low, high]` tuple for `range`, or a `number[]` for `multiple`. Defaults to `min` (single) / `[min, max]` (range) / `[min, max]` (multiple).
defaultValue	GSRangeValue	none	Alias of `value` for the uncontrolled initial value (React parity).
connect	boolean	true	Render the filled/connected portion between thumbs (or from the start to the single thumb). Default: true.
marks	GSRangeMarks	false	Tick marks configuration. `false` (default), `true` (every step), a number interval, a values array, or a `{value,label}` array.
snapToMarks	boolean	false	Snap the thumb to the nearest mark when marks are present. Default: false.
tooltip	GSRangeTooltip	'hover'	Tooltip visibility. Default: 'hover'.
tooltipFormat	GSRangeFormatter	none	Tooltip / aria value formatter.
tooltipPlacement	GSRangeTooltipPlacement	'top'	Where the tooltip sits relative to the thumb. Default: 'top'.
vertical	boolean	false	Render vertically (bottom = min, top = max). Default: false.
rtl	boolean	false	Right-to-left layout (horizontal only). Default: false.
disabled	boolean	false	Disable all interaction and dim the control. Default: false.
readOnly	boolean	false	Read-only: value cannot be changed but the control is not dimmed. Default: false.
pushable	boolean	false	Prevent thumbs from crossing; push the neighbour instead, keeping at least `minGap` between them. Default: false.
minGap	number	0	Minimum gap (in value units) kept between adjacent thumbs. Default: 0.
decimals	number	none	Decimal places used to round + display the value. Default: inferred from `step`.
keyboardStep	number	none	Amount a single Arrow press changes the value. Default: `step`.
pageStep	number	none	Amount PageUp / PageDown changes the value. Default: `step * 10`.
theme	GSRangeTheme	'auto'	Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'.
accentColor	string	none	Accent color (CSS var --gsr-accent).
size	GSRangeSize	'md'	Component size preset. Default: 'md'.
customClass	GSRangeCustomClass	none	Per-part class overrides.
className	string	none	Extra class name applied to the root element.
reducedMotion	'auto' \| boolean	'auto'	Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'.
ariaLabel	string	none	aria-label applied to each thumb.
ariaLabels	string[]	none	Per-thumb aria-labels (indexed).

Technical Features

Multi-Thumb

Single, range or many handles.

Marks & Tooltips

Labelled ticks and value bubbles.

Vertical Mode

Horizontal or vertical orientation.

RTL Support

Right-to-left aware track and thumbs.

API Specifications

Option	Type	Default	Description
reference	string	none	Reference.
min	number	0	Lowest selectable value. Default: 0.
max	number	100	Highest selectable value. Default: 100.
step	number	1	Snap increment. Default: 1. `0` allows continuous values.
mode	GSRangeMode	'single'	Slider mode: `single` (number), `range` (two thumbs, tuple) or `multiple` (N thumbs, array). Default: 'single'.
value	GSRangeValue	none	Initial value. A number for `single`, a `[low, high]` tuple for `range`, or a `number[]` for `multiple`. Defaults to `min` (single) / `[min, max]` (range) / `[min, max]` (multiple).
defaultValue	GSRangeValue	none	Alias of `value` for the uncontrolled initial value (React parity).
connect	boolean	true	Render the filled/connected portion between thumbs (or from the start to the single thumb). Default: true.
marks	GSRangeMarks	false	Tick marks configuration. `false` (default), `true` (every step), a number interval, a values array, or a `{value,label}` array.
snapToMarks	boolean	false	Snap the thumb to the nearest mark when marks are present. Default: false.
tooltip	GSRangeTooltip	'hover'	Tooltip visibility. Default: 'hover'.
tooltipFormat	GSRangeFormatter	none	Tooltip / aria value formatter.
tooltipPlacement	GSRangeTooltipPlacement	'top'	Where the tooltip sits relative to the thumb. Default: 'top'.
vertical	boolean	false	Render vertically (bottom = min, top = max). Default: false.
rtl	boolean	false	Right-to-left layout (horizontal only). Default: false.
disabled	boolean	false	Disable all interaction and dim the control. Default: false.
readOnly	boolean	false	Read-only: value cannot be changed but the control is not dimmed. Default: false.
pushable	boolean	false	Prevent thumbs from crossing; push the neighbour instead, keeping at least `minGap` between them. Default: false.
minGap	number	0	Minimum gap (in value units) kept between adjacent thumbs. Default: 0.
decimals	number	none	Decimal places used to round + display the value. Default: inferred from `step`.
keyboardStep	number	none	Amount a single Arrow press changes the value. Default: `step`.
pageStep	number	none	Amount PageUp / PageDown changes the value. Default: `step * 10`.
theme	GSRangeTheme	'auto'	Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'.
accentColor	string	none	Accent color (CSS var --gsr-accent).
size	GSRangeSize	'md'	Component size preset. Default: 'md'.
customClass	GSRangeCustomClass	none	Per-part class overrides.
className	string	none	Extra class name applied to the root element.
reducedMotion	'auto' \| boolean	'auto'	Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'.
ariaLabel	string	none	aria-label applied to each thumb.
ariaLabels	string[]	none	Per-thumb aria-labels (indexed).