mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekay
d954227524
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Lux surface — loadable and editable.
23 lines
953 B
React
23 lines
953 B
React
import React from 'react'
|
|
|
|
export function Slider({ min = 0, max = 100, step = 1, value, defaultValue = 0, onChange, style, ...rest }) {
|
|
const [inner, setInner] = React.useState(defaultValue)
|
|
const v = value === undefined ? inner : value
|
|
const pct = ((v - min) / (max - min)) * 100
|
|
return (
|
|
<input
|
|
type="range" min={min} max={max} step={step} value={v}
|
|
onChange={(e) => { const n = Number(e.target.value); if (value === undefined) setInner(n); onChange && onChange(n) }}
|
|
style={{
|
|
appearance:'none',WebkitAppearance:'none',width:'100%',height:16,background:'transparent',cursor:'pointer',
|
|
backgroundImage:'linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--neutral-800),var(--neutral-800))',
|
|
backgroundSize: pct + '% 4px, 100% 4px',
|
|
backgroundPosition:'left center, left center',
|
|
backgroundRepeat:'no-repeat',
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|