47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { InputLayout } from '../input-layout/input-layout';
|
|
import React, { forwardRef, InputHTMLAttributes, useId, useState } from 'react';
|
|
|
|
interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
options?: number[];
|
|
}
|
|
|
|
export const Slider = forwardRef<HTMLInputElement, SliderProps>(
|
|
({ options, ...props }, ref) => {
|
|
const sliderId = useId();
|
|
const [progress, setProgress] = useState<number>(0);
|
|
|
|
return (
|
|
<div className={'m3 m3-slider-container'}>
|
|
<InputLayout
|
|
{...props}
|
|
className={props.className}
|
|
list={sliderId}
|
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setProgress(
|
|
(parseInt(event.target.value) /
|
|
parseInt(event.target.max)) *
|
|
100,
|
|
);
|
|
}}
|
|
ref={ref}
|
|
style={{
|
|
...props.style,
|
|
background: `linear-gradient(to right, var(--md-sys-color-primary) ${progress}%, var(--md-sys-color-surface-container-highest) ${progress}%)`,
|
|
}}
|
|
type={'range'}
|
|
typeInput={'slider'}
|
|
/>
|
|
{options && (
|
|
<datalist id={sliderId}>
|
|
{options.map((option, index) => (
|
|
<option key={index} value={option} />
|
|
))}
|
|
</datalist>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
);
|