Slider Stable WINMACLNX

A horizontal range slider backed by native drag events.

Import

import { Slider } from 'veloxkit'

Basic usage

const [volume, setVolume] = useState(0.5)
 
<Slider
  value={volume}
  min={0}
  max={1}
  step={0.01}
  onValueChange={setVolume}
  width={200}
/>

Props

Prop	Type	Default	Description
`value`	`number`	—	Current value (required)
`onValueChange`	`(v: number) => void`	—	Called continuously as the thumb drags
`onSlidingComplete`	`(v: number) => void`	—	Called once when the user releases the thumb
`min`	`number`	`0`	Minimum value
`max`	`number`	`1`	Maximum value
`step`	`number`	`0`	Snap interval (0 = continuous)
`width`	`number`	`200`	Total track width in pixels
`disabled`	`boolean`	`false`	Prevents interaction
`style`	`ViewStyle`	—	Outer container style
`trackColor`	`string`	—	Unfilled track color
`fillColor`	`string`	—	Filled (left of thumb) track color
`thumbColor`	`string`	—	Thumb color

Examples

Volume control

const [volume, setVolume] = useState(0.8)
 
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
  <Text style={{ width: 24 }}>🔈</Text>
  <Slider
    value={volume}
    min={0}
    max={1}
    step={0.05}
    onValueChange={setVolume}
    width={160}
  />
  <Text style={{ width: 36, fontSize: 13, color: '#9999bb' }}>
    {Math.round(volume * 100)}%
  </Text>
</View>

Integer range with snapping

const [rating, setRating] = useState(3)
 
<View style={{ alignItems: 'center', gap: 8 }}>
  <Slider
    value={rating}
    min={1}
    max={5}
    step={1}
    onValueChange={setRating}
    width={200}
  />
  <Text>Rating: {rating} / 5</Text>
</View>

Commit only on release (avoid expensive updates)

const [draft, setDraft]    = useState(50)
const [committed, setCommitted] = useState(50)
 
<View style={{ gap: 8 }}>
  <Slider
    value={draft}
    min={0}
    max={100}
    onValueChange={setDraft}                  // cheap UI update
    onSlidingComplete={setCommitted}           // expensive op fires once
    width={200}
  />
  <Text>Applied: {committed}</Text>
</View>

Full-width slider

import { useWindowSize } from 'veloxkit'
 
function FullWidthSlider({ value, onValueChange }) {
  const { width } = useWindowSize()
 
  return (
    <Slider
      value={value}
      min={0}
      max={1}
      onValueChange={onValueChange}
      width={width - 32}   // full width minus padding
    />
  )
}

Radio Select