Base Usage
import { h } from "preact"
import { useState } from "preact/hooks"
import { Slider } from "@/comps/echo/slider"
export const SliderBaseDemo = () => {
const [count, setCount] = useState(50)
return (
<Slider class="w-[300px]" min={0} max={100} value={count} onChange={setCount} />
)
}
Custom Handle and Snapping
import { h } from "preact"
import { useState } from "preact/hooks"
import { Slider } from "@/comps/echo/slider"
export const SliderHandleDemo = () => {
const [count, setCount] = useState(7)
return <Slider
class="w-[300px]"
min={0}
max={10}
value={count}
step={1}
onChange={setCount}
activeTrackClass="bg-orange-400"
handle={<div class="w-8 h-8 bg-white border-2 border-orange-400 rounded justify-center items-center text-orange-400 bold">{count}</div>}
/>
}
RangeSlider
import { h } from "preact"
import { useState } from "preact/hooks"
import { RangeSlider } from "@/comps/echo/slider"
export const RangeSliderDemo = () => {
const [low, setLow] = useState(25)
const [high, setHigh] = useState(70)
function onChange(value: [number, number]) {
setLow(value[0])
setHigh(value[1])
}
return <RangeSlider
class="w-[300px]"
min={0}
max={100}
value={[low, high]}
onChange={onChange}
activeTrackClass="bg-pink-400"
handle={[
<div class="w-8 h-8 bg-white border-2 border-pink-400 rounded justify-center items-center bold text-pink-400">{parseInt(low + "")}</div>,
<div class="w-8 h-8 bg-white border-2 border-pink-400 rounded justify-center items-center bold text-pink-400">{parseInt(high + "")}</div>
]}
/>
}