Skip to Content
We're rolling out the first batch of Game UIs right now, and it might take a few days to fully wrap up. If you're already testing the UI comps, we'd love to hear any feedback you've got! 🙏

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