Slider Stable WINMACLNX

A horizontal range slider backed by native drag events.

Import

import { Slider } from '@glyx-dev/react'

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`	`0`	Current value
`onValueChange`	`(v: number) => void`	—	Called continuously as the thumb drags or the track is clicked
`onChange`	`(v: number) => void`	—	Alias for `onValueChange` — use either, not both
`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

⚠️

There is no release-only callback (onSlidingComplete does not exist) and no color props (trackColor/fillColor/thumbColor) — the accent color is fixed (#7aa2f7, #555 when disabled). onValueChange/onChange fire on every drag/click update, not just on release.

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>

Debounce an expensive update

There's no release-only event, so debounce in JS if onValueChange drives something costly (a network call, a heavy re-render):

const [draft, setDraft] = useState(50)
const timerRef = useRef(null)
 
function handleChange(v) {
  setDraft(v)                       // cheap UI update, every tick
  clearTimeout(timerRef.current)
  timerRef.current = setTimeout(() => expensiveUpdate(v), 150)
}
 
<Slider value={draft} min={0} max={100} onValueChange={handleChange} width={200} />

Full-width slider

import { useWindowSize } from '@glyx-dev/react'
 
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