📄 tanstack/ranger/latest/docs/framework/react/examples/custom-steps
File: custom-steps.md | Updated: 11/15/2025
Source: https://tanstack.com/ranger/latest/docs/framework/react/examples/custom-steps
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Adapters
API Reference
Examples
Framework
React
Version
Latest
Menu
Getting Started
Adapters
API Reference
Examples
React Example: Custom Steps
==========================================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
main.tsx
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.dev.json
-
tsconfig.json
-
vite.config.js
tsx
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import { useRanger, Ranger } from '@tanstack/react-ranger'
import { createRoot } from 'react-dom/client'
function App() {
const [values, setValues] = React.useState<ReadonlyArray<number>>([0, 500000])
const rangerRef = React.useRef<HTMLDivElement>(null)
const rangerInstance = useRanger<HTMLDivElement>({
getRangerElement: () => rangerRef.current,
values,
min: 1000,
max: 500000,
steps: [0, 20000, 100000, 250000, 500000],
ticks: [0, 100000, 250000, 500000],
onChange: (instance: Ranger<HTMLDivElement>) =>
setValues(instance.sortedValues),
})
return (
<div className="App" style={{ padding: 10 }}>
<h1>Custom Steps</h1>
<br />
<br />
<div
ref={rangerRef}
style={{
position: 'relative',
userSelect: 'none',
height: '4px',
background: '#ddd',
boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
borderRadius: '2px',
margin: '0 100px',
}}
>
{rangerInstance.getTicks().map(({ value, key, percentage }) => (
<div
key={key}
style={{
position: 'absolute',
top: '5px',
left: `${percentage}%`,
transform: 'translateX(-50%)',
}}
>
{value}
</div>
))}
{rangerInstance
.handles()
.map(
(
{
value,
onKeyDownHandler,
onMouseDownHandler,
onTouchStart,
isActive,
},
i,
) => (
<button
key={i}
onKeyDown={onKeyDownHandler}
onMouseDown={onMouseDownHandler}
onTouchStart={onTouchStart}
role="slider"
aria-valuemin={rangerInstance.options.min}
aria-valuemax={rangerInstance.options.max}
aria-valuenow={value}
style={{
position: 'absolute',
top: '50%',
left: `${rangerInstance.getPercentageForValue(value)}%`,
zIndex: isActive ? '1' : '0',
transform: 'translate(-50%, -50%)',
width: '14px',
height: '14px',
outline: 'none',
borderRadius: '100%',
background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
border: 'solid 1px #888',
}}
/>
),
)}
</div>
<br />
<br />
<br />
<pre
style={{
display: 'inline-block',
textAlign: 'left',
}}
>
<code>
{JSON.stringify({
values,
})}
</code>
</pre>
</div>
)
}
const root = createRoot(document.getElementById('root')!)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import { useRanger, Ranger } from '@tanstack/react-ranger'
import { createRoot } from 'react-dom/client'
function App() {
const [values, setValues] = React.useState<ReadonlyArray<number>>([0, 500000])
const rangerRef = React.useRef<HTMLDivElement>(null)
const rangerInstance = useRanger<HTMLDivElement>({
getRangerElement: () => rangerRef.current,
values,
min: 1000,
max: 500000,
steps: [0, 20000, 100000, 250000, 500000],
ticks: [0, 100000, 250000, 500000],
onChange: (instance: Ranger<HTMLDivElement>) =>
setValues(instance.sortedValues),
})
return (
<div className="App" style={{ padding: 10 }}>
<h1>Custom Steps</h1>
<br />
<br />
<div
ref={rangerRef}
style={{
position: 'relative',
userSelect: 'none',
height: '4px',
background: '#ddd',
boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
borderRadius: '2px',
margin: '0 100px',
}}
>
{rangerInstance.getTicks().map(({ value, key, percentage }) => (
<div
key={key}
style={{
position: 'absolute',
top: '5px',
left: `${percentage}%`,
transform: 'translateX(-50%)',
}}
>
{value}
</div>
))}
{rangerInstance
.handles()
.map(
(
{
value,
onKeyDownHandler,
onMouseDownHandler,
onTouchStart,
isActive,
},
i,
) => (
<button
key={i}
onKeyDown={onKeyDownHandler}
onMouseDown={onMouseDownHandler}
onTouchStart={onTouchStart}
role="slider"
aria-valuemin={rangerInstance.options.min}
aria-valuemax={rangerInstance.options.max}
aria-valuenow={value}
style={{
position: 'absolute',
top: '50%',
left: `${rangerInstance.getPercentageForValue(value)}%`,
zIndex: isActive ? '1' : '0',
transform: 'translate(-50%, -50%)',
width: '14px',
height: '14px',
outline: 'none',
borderRadius: '100%',
background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
border: 'solid 1px #888',
}}
/>
),
)}
</div>
<br />
<br />
<br />
<pre
style={{
display: 'inline-block',
textAlign: 'left',
}}
>
<code>
{JSON.stringify({
values,
})}
</code>
</pre>
</div>
)
}
const root = createRoot(document.getElementById('root')!)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
