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} />
    )
}

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>}
    />
}

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>
        ]}
    />
}