Carousels & Tickers

Step Slider

Discrete step slider snapped to labeled ticks (plan tiers, quantity breaks), draggable with full keyboard support.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add step-slider

Built for react. Needs react, react-dom already installed as peer dependencies. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Step Slider →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.0 react react-dom

Step Slider

StarterGrowthScaleEnterprise

Props

Name	Type	Required	Default
steps	{ label, value }[] — ordered	No	[]
defaultIndex	starting index (	No	0
onChange	(step, index) => void	Yes

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/step-slider/StepSlider.jsx

Using the Step Slider component

Install it with velocityx add step-slider. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Step Slider

Props

File this creates

Using the Step Slider component

Related components