126 lines
2.8 KiB
TypeScript
126 lines
2.8 KiB
TypeScript
import * as React from "react";
|
|
import ReactToolbox from "../index";
|
|
|
|
export interface SliderTheme {
|
|
/**
|
|
* Used as an inner container of the root component.
|
|
*/
|
|
container?: string;
|
|
/**
|
|
* Added to the root of in case the Slider is editable.
|
|
*/
|
|
editable?: string;
|
|
/**
|
|
* Used to style the inner element of the knob.
|
|
*/
|
|
innerknob?: string;
|
|
/**
|
|
* Provided to the ProgressBar component.
|
|
*/
|
|
innerprogress?: string;
|
|
/**
|
|
* Provided to the Input element in case it's editable.
|
|
*/
|
|
input?: string;
|
|
/**
|
|
* Used to style the outer layer of the knob.
|
|
*/
|
|
knob?: string;
|
|
/**
|
|
* Added to the root in case the Slider is pinned.
|
|
*/
|
|
pinned?: string;
|
|
/**
|
|
* Added to the root in case the state is pressed.
|
|
*/
|
|
pressed?: string;
|
|
/**
|
|
* Used as an outer wrapper for the ProgressBar.
|
|
*/
|
|
progress?: string;
|
|
/**
|
|
* Used in the root when the knob should be a ring.
|
|
*/
|
|
ring?: string;
|
|
/**
|
|
* Class used for the root element.
|
|
*/
|
|
slider?: string;
|
|
/**
|
|
* Used for every individual snap element.
|
|
*/
|
|
snap?: string;
|
|
/**
|
|
* Used as a wrapper for the group of snaps when it's snapped.
|
|
*/
|
|
snaps?: string;
|
|
}
|
|
|
|
export interface SliderProps extends ReactToolbox.Props {
|
|
/**
|
|
* If true, an input is shown and the user can set the slider from keyboard value.
|
|
* @default false
|
|
*/
|
|
editable?: boolean;
|
|
/**
|
|
* If true, component will be disabled.
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* Maximum value permitted.
|
|
* @default 100
|
|
*/
|
|
max?: number;
|
|
/**
|
|
* Minimum value permitted.
|
|
* @default 0
|
|
*/
|
|
min?: number;
|
|
/**
|
|
* Callback function that will be invoked when the slider value changes.
|
|
*/
|
|
onChange?: Function;
|
|
/**
|
|
* Callback function that will be invoked when the slider starts being dragged.
|
|
*/
|
|
onDragStart?: Function;
|
|
/**
|
|
* Callback function that will be invoked when the slider stops being dragged.
|
|
*/
|
|
onDragStop?: Function;
|
|
/**
|
|
* If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
|
|
* @default false
|
|
*/
|
|
pinned?: boolean;
|
|
/**
|
|
* If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
|
|
* @default false
|
|
*/
|
|
snaps?: boolean;
|
|
/**
|
|
* Amount to vary the value when the knob is moved or increase/decrease is called.
|
|
* @default 0.01
|
|
*/
|
|
step?: number;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: SliderTheme;
|
|
/**
|
|
* Current value of the slider.
|
|
* @default 0
|
|
*/
|
|
value?: number;
|
|
|
|
/**
|
|
* Used to style the ProgressBar element
|
|
*/
|
|
buffer?: number;
|
|
}
|
|
|
|
export class Slider extends React.Component<SliderProps, {}> { }
|
|
|
|
export default Slider;
|