Slider

Slider component to select value from range. http://react-component.github.io/slider/

Install

import {Slider} from '@xsolla/uikit';

Examples

Slider
4
Ranged slider
[ 4, 8, 12, 16 ]

Usage

Slider

<Slider
  input={{
    name: 'slider',
    value: 4,
    onChange: this.setValue
  }}
/>

Ranged slider

<Slider
  input={{
    name: 'rangedSlider',
    value: [4, 8, 12, 16],
    onChange: this.setValue
  }}
  range={true}
  count={3}
/>

With redux-form

<Field component={Slider} name="redux-slider" />

API

PropertyDescriptionTypeDefault
inputconfig for redux-form or basic sliderobject{}
metameta for redux-form or basic inputobject{touched: false, error: null}
minslider min rangenumber0
maxslider max rangenumber100
stepslider stepnumber1
disabledset the disabled status of sliderboolfalse
rangeuse multiple valuesboolfalse
countDetermine how many ranges to render, and multiple handles will be rendered (number + 1). (works with ranged slider only)number1
allowCrossallowCross could be set as true to allow those handles to cross. (works with ranged slider only)booltrue
tooltipenables a tooltip with a slider valueboolfalse
tipFormatterMethod for formatting the slider value inside the tooltipfunc(value) => value
tipPropsProperties for customizing slider tooltipobject{}