import React from "react";
import { SliderProps } from "./SliderProps";
import { Slider as KendoSlider } from "@progress/kendo-react-inputs";

const Slider: React.FC<SliderProps> = ({
  dataTestId,
  ariaDescribedBy,
  ariaLabel,
  ariaLabelledBy,
  buttons,
  children,
  className,
  defaultValue,
  dir,
  disabled,
  id,
  max,
  min,
  name,
  required,
  step,
  style,
  tabIndex,
  valid,
  validationMessage,
  validityStyles,
  value,
  vertical,
  onChange,
}) => {
  return (
    <div data-test-id={dataTestId}>
      <KendoSlider
        ariaDescribedBy={ariaDescribedBy}
        ariaLabel={ariaLabel}
        ariaLabelledBy={ariaLabelledBy}
        buttons={buttons}
        className={className}
        defaultValue={defaultValue}
        dir={dir}
        disabled={disabled}
        id={id}
        max={max}
        min={min}
        name={name}
        required={required}
        step={step}
        style={style}
        tabIndex={tabIndex}
        valid={valid}
        validationMessage={validationMessage}
        validityStyles={validityStyles}
        value={value}
        vertical={vertical}
        onChange={onChange}
      >
        {children}
      </KendoSlider>
    </div>
  );
};
export default Slider;