Skip to main content

Range

The Range component is similar to the Slider component built with react-compound-slider, but allows the user to select start and end values. Developers can specify eventIndicators as custom icons that will be positioned relative to tick marks.

Result
Loading...
Live Editor
<Range label="Range" minValue={0} maxValue={10} selectedStartValue={2} selectedEndValue={8} />

With event indicators​

Result
Loading...
Live Editor
<Range
	label="Range with Event Indicators"
	minValue={0}
	maxValue={10}
	selectedStartValue={2}
	selectedEndValue={8}
	eventIndicators={{
		2: {
			icon: 'icon-coins-01',
			tooltipTextItems: ['Single Line'],
		},
		8: {
			icon: 'icon-sunset',
			tooltipTextItems: ['Multi', 'Line', 'Tooltip'],
		},
		6: {
			icon: 'icon-moon-eclipse',
			tooltipTextItems: ['Eclipse'],
		},
	}}
/>

Within a form​

Result
Loading...
Live Editor
<div data-testid="within-form">
	<Form
		initialValues={{
			range: {
				selectedStartValue: 1,
				selectedEndValue: 9,
			},
		}}
		onSubmit={async (values, { setSubmitting }) => {
			console.log(values);
			setSubmitting(false);
		}}
		validationSchema={object().shape({
			range: object().shape({
				selectedStartValue: number().required().min(1, 'Start value must be at least 1'),
				selectedEndValue: number().required().min(3, 'End value must be at least 3'),
			}),
		})}
	>
		{({
			values: {
				range: { selectedStartValue, selectedEndValue },
			},
		}) => (
			<>
				<FormField>
					<Range label="Range" name="range" minValue={0} maxValue={10} />
				</FormField>

				<NumberField label="Selected Start Value" value={selectedStartValue} />
				<NumberField label="Selected End Value" value={selectedEndValue} />
			</>
		)}
	</Form>
</div>

Analytics​

The Range component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Range',
	actions: {
		onChange: { type: 'RANGE_CHANGE', payload: 'Change' },
	},
};

Props​