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 minValue={0} maxValue={10} selectedStartValue={2} selectedEndValue={8} />

With event indicators​

Result
Loading...
Live Editor
<Range
	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'],
		},
	}}
/>

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​