feat(html): add slider helper

packages/html/src/index.ts

@@ -31,7 +31,7 @@ export * from './checkbox/index';
 export * from './radio/index';
 // export * from './listbox/index';
 // export * from './progressbar/index';
-// export * from './slider/index';
+export * from './slider/index';
 
 // Augmented inputs
 export * from './floating-label/index';

packages/html/src/slider/index.ts

@@ -0,0 +1,2 @@
+export * from './slider.spec';
+export * from './slider-tick';

packages/html/src/slider/slider-tick.tsx

@@ -0,0 +1,52 @@
+import { classNames } from '../utils';
+
+const SLIDER_TICK_CLASSNAME = 'k-tick';
+
+const states = [];
+
+const options = {};
+
+export type KendoSliderTickProps = {
+    style?: React.CSSProperties,
+    label?: boolean,
+    orientation?: null | 'horizontal' | 'vertical',
+    large?: boolean,
+    text?: string
+};
+
+const defaultProps = {
+    label: false
+};
+
+export const SliderTick = (
+    props: KendoSliderTickProps &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        style,
+        label = defaultProps.label,
+        orientation,
+        large,
+        text
+    } = props;
+
+    return (
+        <li className={classNames(
+            props.className,
+            SLIDER_TICK_CLASSNAME,
+            {
+                [`k-tick-${orientation}`]: orientation,
+                'k-tick-large': large
+            }
+        )} style={style} >
+            {label && <span className="k-label">{text}</span>}
+        </li>
+    );
+};
+
+SliderTick.states = states;
+SliderTick.options = options;
+SliderTick.className = SLIDER_TICK_CLASSNAME;
+SliderTick.defaultProps = defaultProps;
+
+export default SliderTick;

packages/html/src/slider/slider.spec.tsx

@@ -0,0 +1,120 @@
+import { classNames, stateClassNames, States } from '../utils';
+import { Button } from '../button';
+
+const SLIDER_CLASSNAME = 'k-slider';
+
+const states = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.disabled,
+    States.readonly
+];
+
+const options = {};
+
+export type KendoSliderProps = {
+    type?: 'single' | 'range' | 'gradient',
+    orientation?: 'horizontal' | 'vertical',
+    dir?: 'ltr' | 'rtl',
+    handlePosition?: 'start' | 'end',
+    trackStyle?: React.CSSProperties
+};
+
+export type KendoSliderState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    type: 'single',
+    orientation: 'horizontal',
+    readonly: false,
+    disabled: false,
+    handlePosition: 'end'
+};
+
+export const Slider = (
+    props: KendoSliderProps &
+        KendoSliderState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        type = defaultProps.type,
+        orientation = defaultProps.orientation,
+        readonly = defaultProps.readonly,
+        disabled = defaultProps.disabled,
+        handlePosition = defaultProps.handlePosition,
+        hover,
+        focus,
+        active,
+        trackStyle,
+        dir
+    } = props;
+
+    let iconIncrease;
+    let iconDecrease;
+
+    if ( orientation === 'horizontal' ) {
+        iconIncrease = 'caret-alt-right';
+        iconDecrease = 'caret-alt-left';
+    } else if ( orientation === 'vertical' ) {
+        iconIncrease = 'caret-alt-up';
+        iconDecrease = 'caret-alt-down';
+    }
+
+    return (
+        <div className={classNames(
+            SLIDER_CLASSNAME,
+            props.className,
+            stateClassNames(SLIDER_CLASSNAME, {
+                readonly,
+                disabled
+            }),
+            {
+                [`k-slider-${orientation}`]: orientation,
+                'k-colorgradient-slider': type === 'gradient',
+                'k-range-slider': type === 'range'
+            }
+        )} dir={dir} >
+            { type !== 'gradient' && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
+            <div className="k-slider-track-wrap">
+                {
+                    type !== 'gradient' &&
+                        <ul className="k-reset k-slider-items">
+                            {props.children}
+                        </ul>
+                }
+                <div className="k-slider-track" style={trackStyle}>
+                    <div className="k-slider-selection"></div>
+                    { type === 'range' &&
+
+                    <span className={classNames(
+                        'k-draghandle',
+                        'k-draghandle-start',
+                        stateClassNames(SLIDER_CLASSNAME, {
+                            hover,
+                            focus,
+                            active
+                        })
+                    )}></span> }
+
+                    <span className={classNames(
+                        'k-draghandle',
+                        `k-draghandle-${handlePosition}`,
+                        stateClassNames(SLIDER_CLASSNAME, {
+                            hover,
+                            focus,
+                            active
+                        })
+                    )}></span>
+                </div>
+            </div>
+            { type !== 'gradient' && <Button className="k-button-increase" rounded="full" icon={iconIncrease} /> }
+        </div>
+    );
+};
+
+Slider.states = states;
+Slider.options = options;
+Slider.className = SLIDER_CLASSNAME;
+Slider.defaultProps = defaultProps;
+
+export default Slider;