import { ElSlider } from 'element-plus'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps, fromInputEmits } from '../../form-input-props'
import { useSliderConfig } from './use-slider-config'
import './index.less'
export default {
  props: formInputProps,
  emits: [...fromInputEmits],
  setup (props, context) {
    const formInput = useFormInput(props, context)
    const { proxyValue, width } = formInput
    const { max, min, step } = useSliderConfig(formInput)
    return () => <div class={'basic-slider'} style={{ width: width.value }}>
      <ElSlider
        v-model={proxyValue.value}
        max={max.value}
        min={min.value}
        step={step.value}
        disabled={props.disabled}
        marks={props.config.marks}
      />
    </div>
  }
}