flexor-web/src/app/components/slider.tsx

import React, { FC } from 'react'
import { useTheme } from '../hooks'

interface Props {
    value: number
    onChange: (value: number) => void
}

const Slider: FC<Props> = ({ value, onChange }) => {
    const theme = useTheme()
    return (
        <input
            type="range"
            min="0"
            max="100"
            style={{ backgroundColor: '#ccc' }}
            value={value}
            onChange={e => onChange(parseInt(e.target.value, 10))} />
    )
}

export default Slider