import type { FunctionComponent } from 'react'

import type { IPropsComponent } from '../../../global/type'

const Slider: FunctionComponent<IPropsComponent> = (props: IPropsComponent) => {
  return (
    <>
      <div className="w-10/12 px-3">
        <input
          id={props.id}
          value={props.value}
          type="range"
          className="range"
          onChange={props.onChange}
          min={props.min}
          max={props.max}
          step={props.step}
          disabled={props.disabled}
        />
      </div>
      <div className="w-2/12">
        {props.prefixValue}
        {props.value}
        {props.suffixValue}
      </div>
    </>
  )
}

export default Slider
