39 lines
924 B
TypeScript
39 lines
924 B
TypeScript
|
|
|
|
import { Box, HStack } from './LayoutPrimitives'
|
|
import { styled, theme } from '../tokens/stitches.config'
|
|
|
|
type TickedRangeSliderProps = {
|
|
ticks?: number,
|
|
value: number,
|
|
onChange: (value: number) => void,
|
|
min?: number,
|
|
max?: number,
|
|
step?: number,
|
|
}
|
|
|
|
const Tick = styled(Box, {
|
|
background: theme.colors.grayBorderHover,
|
|
width: 2,
|
|
height: 8,
|
|
})
|
|
|
|
export function TickedRangeSlider({
|
|
ticks = 8,
|
|
min = 10,
|
|
max = 28,
|
|
step = 1,
|
|
value,
|
|
onChange,
|
|
} : TickedRangeSliderProps
|
|
): JSX.Element {
|
|
|
|
return (
|
|
<Box css={{zIndex: 2}}>
|
|
<input onChange={(e) => onChange(e.target.value as any)} value={value} type="range" min={min} max={max} step={step} className='slider'/>
|
|
<HStack distribution='between' css={{position: 'relative', bottom: 12.2, left: 2, zIndex: -1}}>
|
|
{[...Array(ticks)].map((val, idx) => <Tick key={`ticks-${idx}`} />)}
|
|
</HStack>
|
|
</Box>
|
|
)
|
|
} |