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} />

<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'], }, }} />

<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