Top
Slider API - API
Slider API
Props (28)
Callback Props (4)
Styling Props (5)
React.Node
default: undefined
The button used to decrement the value. It will have a parent that applies listeners and handles all interaction so that no domProps will be exposed.
This prop only applies for Slider, but not for RangeSlider.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

const decrementButton = <div style={{ transform: 'rotate(90deg)' }}>▼</div>

export default () => <div style={{ marginTop: 20 }}>
  <Slider
    showButtons={true}
    decrementButton={decrementButton}
    defaultValue={100}
  />
</div>
number|number[]
default: undefined
The initial value of the <Slider />, or <RangeSlider />. This is undefined by default and assumed as startValue for <Slider /> and as the range [startValue, endValue] for the <RangeSlider />.
Setting the default value for the <Slider /> is straightforward. But it must be between startValue and endValue in order to be set as initial position for the slider.
In case of <RangeSlider /> default value must be a range as well, and it must be contained by the range[startValue, endValue]. If startValue is higher than endValue, thendefaultValue must be a range specified in reversed order as well.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>defaultValue=35, between 0 and 100</code>
  <Slider defaultValue={35} />
  <code>defaultValue=[30, 50], a range inside [0, 100]</code>
  <RangeSlider defaultValue={[30, 50]} />
  <code>defaultValue reversed, [50, 30] inside [100, 0]</code>
  <RangeSlider defaultValue={[50, 30]} startValue={100} endValue={0}/>
</div>
Bool
default: true
Sets whether the value can be set from outside the handle by clicking anywhere on the track.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enableTrackClick: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.enableTrackClick}
          onChange={(enableTrackClick) => this.setState({enableTrackClick})}
        >
          enableTrackClick
        </CheckBox>
      </div>
      <Slider enableTrackClick={this.state.enableTrackClick} />
      
    </div>
  }
}
export default () => <App />
number
default: 100
Sets the value at which <Slider /> should end. Although default=100, you can set a different value. This can represent the minimum or maximum value of the <Slider />, but will always be on the right end, or at the bottom (if orientation="vertical") of the <Slider />.
The order of startValue and endValue can be reversed. In that case the sliding behavior is reversed as well, decreasing from left to right, or bottom to top (if orientation="vertical").
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>default endValue is 100</code>
  <Slider/>
  <RangeSlider tickStep={50}/>
  <code>custom endValue=30</code>
  <Slider endValue={30} tickStep={15}/>
  <RangeSlider endValue={30} tickStep={15}/>
  <code>reverse endValue=50</code>
  <Slider startValue={100} endValue={50} tickStep={25}/>
  <RangeSlider startValue={100} endValue={50} tickStep={25}/>
</div>
{width: Number, height: Number}
default: "{width: 10, height: 10}"
The size of the handler in pixels. Internally, this is set with JavaScript, not CSS. The size is used to figure out how much space to allow the drag interaction to work outside the track bar.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { handleHeight: 10, handleWidth: 10 }
  } 
  
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        Handle height:
        <NumericInput
          style={{ width: 70, marginRight: 10, marginLeft: 5 }}
          value={this.state.handleHeight}
          minValue={5}
          maxValue={50}
          onChange={(handleHeight) => this.setState({handleHeight})}
        />
        Handle width:
        <NumericInput
          style={{ width: 70, marginLeft: 5 }}
          value={this.state.handleWidth}
          minValue={5}
          maxValue={50}
          onChange={(handleWidth) => this.setState({handleWidth})}
        />
      </div>
      <Slider handleSize={{width: this.state.handleWidth, height: this.state.handleHeight}}  />
    </div>
  }
}
export default () => <App />
React.Node
default: undefined
The button used to increment the value. It will have a parent that applies listeners and handles all interaction so that no domProps will be exposed.
This prop only applies for Slider, but not for RangeSlider.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

const incrementButton = <div style={{ transform: 'rotate(90deg)' }}>▲</div>

export default () => <div style={{ marginTop: 20 }}>
  <Slider showButtons={true} incrementButton={incrementButton} />
</div>
number
default: 10
Used to configure handle's transition amount, similar to step, but this prop works when the Shift key is pressed while using the arrow keys or the mouse wheel.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>largeStep=10 (default)</code>
  <Slider />
  <RangeSlider />
  <code>largeStep=20</code>
  <Slider largeStep={20} />
  <RangeSlider largeStep={20} />
</div>
Number
default: 1
This prop controls the maximum range formed by the two handlers of the RangeSlider, that is its value.
See minRange for the minimum range.
This prop only applies for RangeSlider.
import React from 'react'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>maxRange=30</code>
  <RangeSlider maxRange={30} defaultValue={[20, 30]} />
  <code>maxRange=50</code>
  <RangeSlider maxRange={50} defaultValue={[20, 30]} />
</div>
Number
default: 1
This prop controls the minimum range formed by the two handlers of the RangeSlider, that is its value.
See maxRange for the maximum range.
This prop only applies for RangeSlider.
import React from 'react'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>minRange=30</code>
  <RangeSlider minRange={30} defaultValue={[20, 30]} />
  <code>minRange=50</code>
  <RangeSlider minRange={50} defaultValue={[20, 30]} />
</div>
Bool
default: false
When set to true, there will be no filled segment to indicate the value.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { noFill: false }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.noFill}
          onChange={(noFill) => this.setState({noFill})}
        >
          noFill
        </CheckBox>
      </div>
      <Slider noFill={this.state.noFill} />
      <RangeSlider noFill={this.state.noFill} />
    </div>
  }
}
export default () => <App />
horizontal|vertical
default: "horizontal"
This prop sets the layout mode of the component. rtl prop cannot be used if orientation="vertical".
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { orientation: 'horizontal' }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <div>
          Choose orientation
        </div>
        <ComboBox
          autoBlur
          style={{width: 200}}
          dataSource={
            [
              {id: 'horizontal', label: 'horizontal'},
              {id: 'vertical', label: 'vertical'}
            ]
          }
          value={this.state.orientation}
          onChange={(orientation) => this.setState({orientation: orientation || 'horizontal'})}
        />
      </div>
      <div style={this.state.orientation === 'vertical' ? { display: 'inline-flex' } : {}}>
        <Slider orientation={this.state.orientation} />
        <RangeSlider orientation={this.state.orientation} />
      </div>
    </div>
  }
}

export default () => <App />
Component
default: undefined
<RangeSlider /> is a named export of this module. It's similar with the <Slider />, except that its value it's not a number, but a range.
import React from 'react'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div style={{ marginTop: 20 }}>
  <RangeSlider />
</div>
Fn(domProps, customProps): React.Node
default: undefined
A custom render method used to render the content of the handle. By default the handle is a simple div without any content, but it can be customized to have additional content within the handler, like the current value and so on.
Receives domProps and customProps parameters:
  • domProps: contains the className, styles and any additional content sent by the <Slider /> to be rendered in the domProps.
  • customProps: contains additional information:
    • dragging: indicating if the slide is in dragging mode or not
    • value: the numeric value of the slide at this given moment
    • focused: indicating if the handle is focused or not - for <RangeSlider /> only one of the two handles is in focus at a time.
import React from 'react'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

const renderHandleContent = (domProps, customProps) => {
  const value = {
    startHandler: customProps.value[0],
    endHandler: customProps.value[1]
  };
  return <div {...domProps} children={value[domProps.key]}/>;
}

const style = {
  fontSize: 12,
  paddingTop: 2,
  textAlign:'center',
  borderRadius:'4px',
  color: '#fff',
  userSelect: 'none',
  transform: 'rotate(90deg) translateX(-8px)',
  width: 14
}

export default () => <div>
  <RangeSlider
    renderHandleContent={renderHandleContent}
    handleStyle={style}
    handleSize={{width:35, height:20}}
    tickLabels={false}
  />
</div>
Fn(domProps, {tickValue: Number})
default: "end"
By default, the label consists of a simple number for tick value. With this prop you can provide a custom render function for the label.
For more information see ticks page.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

const renderTickLabel = (domProps, { tickValue }) => {
  const style = Object.assign({}, domProps.style, {
    fontWeight: 700,
    color: '#e9580a'
  })

  return <span {...domProps} style={style}>
    {tickValue}%
  </span>
}

export default () => <div style={{ marginTop: 20 }}>
  <Slider renderTickLabel={renderTickLabel} />
</div>
Bool
default: false
When rtl=true, right-to-left rendering and behavior will be applied to the control. It only works if orientation="horizontal".
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { rtl: false }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => this.setState({rtl})}
        >
          rtl
        </CheckBox>
      </div>
      <Slider rtl={this.state.rtl}  showButtons={true}/>
      <RangeSlider rtl={this.state.rtl}  showButtons={true}/>
    </div>
  }
}
export default () => <App />
Bool
default: false
Sets whether to show or hide the buttons for the <Slider /> component. Buttons are used to increase or decrease the current value. This property is not available for the <RangeSlider /> control.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showButtons: false }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.showButtons}
          onChange={(showButtons) => this.setState({showButtons})}
        >
          showButtons
        </CheckBox>
      </div>
      <Slider showButtons={this.state.showButtons} />
      
    </div>
  }
}
export default () => <App />
Bool
default: false
Sets whether to hide or show the minValue and maxValue. For example, you might want to avoid the visual inconsistency caused by rendering a tick for a tick bar that has rounded corners.
For more information see ticks page
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { skipEdgeTicks: false }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.skipEdgeTicks}
          onChange={(skipEdgeTicks) => this.setState({skipEdgeTicks})}
        >
          skipEdgeTicks
        </CheckBox>
      </div>
      <Slider skipEdgeTicks={this.state.skipEdgeTicks}  tickStep={10} trackStyle={{"borderRadius":10,"height":10}} trackFillStyle={{"borderRadius":10,"height":10}}/>
      
    </div>
  }
}
export default () => <App />
Component
default: undefined
<Slider /> is the default export of this module. It has a number as value .
See RangeSlider for a slider with a range as value.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div style={{ marginTop: 20 }}>
  <Slider />
</div>
Number
default: 10
Sets the distance in steps between the small bars on the <Slider />. These bars have no labels and they usually are subunits for the tickStep, which has a number as label. tickStep will overwrite smallTickStep if they come on the same step.
For more information see ticks page.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>smallTickStep=2</code>
  <Slider smallTickStep={2} />
  <code>smallTickStep=6</code>
  <Slider smallTickStep={6} />
</div>
number
default: 0
Sets the value where <Slider /> should start. Although default=100, you can set a different value. This can represent the minimum or maximum value of the <Slider />, but will always be on the left side at the beginning, or on top (if orientation="vertical") of the <Slider />.
The order of startValue and endValue can be reversed. In that case the sliding behavior is reversed as well, decreasing from left to right, or bottom to top (if orientation="vertical").
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>default startValue is 0</code>
  <Slider />
  <RangeSlider />
  <code>custom startValue=30</code>
  <Slider startValue={30}  />
  <RangeSlider startValue={30} />
  <code>reverse startValue=50</code>
  <Slider startValue={50} endValue={0} />
  <RangeSlider startValue={50} endValue={0} />
</div>
Bool
default: true
When dragging it is usually better to prevent multiple change events from triggering. This property (enabled by default) will set the internal state while the handle from <Slider /> is being dragged.
Setting it to false, will make the component trigger change events for each update during the drag, but note that this might make the behavior sluggish or break the functionality if in the onChange event we set a controlled value that is not under the dragging pointer.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { statefulDrag: true, value: 0 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.statefulDrag}
          onChange={(statefulDrag) => this.setState({statefulDrag})}
        >
          statefulDrag
        </CheckBox>
      </div>
      <div>
        Slider value: {this.state.value}
      </div>
      <Slider statefulDrag={this.state.statefulDrag} onChange={(value) => this.setState({value})} />
    </div>
  }
}
export default () => <App />
number
default: 1
The small unit on the slide. The increment and decrement action will alter the value based on the step value.
Clicking or dragging will also move the <Slider /> by multiples of step.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>step=1 (default)</code>
  <Slider />
  <RangeSlider />
  <code>step=10</code>
  <Slider step={10} />
  <RangeSlider step={10} />
</div>
start|end|both|none
default: "end"
Will render the ticks before, after or before and after the slide. If set to none it will not render any ticks.
For more information see ticks page.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/RadioButton/index.css'

const options = [
  {
    label: 'start',
    value: 'start'
  },
  {
    label: 'end',
    value: 'end'
  },
  {
    label: 'both',
    value: 'both'
  },
  {
    label: 'none',
    value: 'none'
  }
]

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tickBarPosition: 'end' }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <div>Choose tickBarPosition</div>
        <RadioButtonGroup
          radioValue={this.state.tickBarPosition}
          onChange={(button) => this.setState({tickBarPosition: button.checkedItemValue})}
          radioOptions={options}
        />
      </div>
      <Slider tickBarPosition={this.state.tickBarPosition} />
    </div>
  }
}
export default () => <App />
Bool
default: true
By default, big ticks have labels. We can disable this by setting tickLabels=false. This will still render the big ticks, but will ignore any label rendering logic.
For more information see ticks page
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tickLabels: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.tickLabels}
          onChange={(tickLabels) => this.setState({tickLabels})}
        >
          tickLabels
        </CheckBox>
      </div>
      <Slider tickLabels={this.state.tickLabels} />
      
    </div>
  }
}
export default () => <App />
{type: small|big, value: Number}[]
default: false
A set of ticks to be rendered insted of the autogenerated ones. If this prop is specified, the smallTickStep and tickStep props will be ignored.
For more information see ticks page
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

const ticks = [
  { value: 7.5, type: 'small' },
  { value: 15, type: 'big' },
  { value: 30, type: 'small' },
  { value: 60, type: 'big' },
  { value: 100, type: 'small' },
]

export default () => <div style={{ marginTop: 20 }}>
  <RangeSlider ticks={ticks} />
  <Slider ticks={ticks} />
</div>
Number
default: 50
Sets the distance in steps between the big bars on the <Slider />. These bars have labels attached. Use the smallTickStep to set smaller bars between the tick steps.
For more information see ticks page.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>tickStep=10</code>
  <Slider tickStep={10} />
  <code>tickStep=20</code>
  <Slider tickStep={20} />
</div>
start|end
default: "start"
Specifies whether the filled region of the <Slider /> should be from start to handle, or from the handle to end.
Only applies for Slider, but not for RangeSlider
rtl prop will reverse everything.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

export default () => <div>
  <code>trackFillPosition=start</code>
  <Slider trackFillPosition={'start'} />
  <code>trackFillPosition=end</code>
  <Slider trackFillPosition={'end'} />
</div>
Number|Number[]
default: undefined
Controlled value for this component.
For Slider this value is a number, while for a RangeSlider it is a range, defined as a JavaScript array.
To react to change the value use onChange.
For uncontrolled behaviour, see defaultValue.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

const codeStyle = {
  display: 'inline-flex'
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 10, rangeValue: [10, 20] }
  }
  render() {
    const onChange = (value) => {
      this.setState({ value })
    }
    const onChangeRange = (rangeValue) => {
      this.setState({ rangeValue })
    }
    return <div>
      <div style={{ marginBottom: 20 }}>Current value is: <code style={codeStyle}>{this.state.value}</code></div>
      <div style={{ marginBottom: 20 }}>
        The range value is: <code style={codeStyle}>{JSON.stringify(this.state.rangeValue)}</code>
      </div>
      <Slider value={this.state.value} onChange={onChange} />
      <RangeSlider value={this.state.rangeValue} onChange={onChangeRange} />
    </div>
  }
}
export default () => <App />
Fn(value: Number)
default: undefined
Called when value changes.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

const codeStyle = {
  display: 'inline-flex'
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 10, rangeValue: [10, 20] }
  }
  render() {
    const onChange = (value) => {
      this.setState({ value })
    }
    const onChangeRange = (rangeValue) => {
      this.setState({ rangeValue })
    }
    return <div>
      <div style={{ marginBottom: 20 }}>Current value is: <code style={codeStyle}>{this.state.value}</code></div>
      <div style={{ marginBottom: 20 }}>
        The range value is: <code style={codeStyle}>{JSON.stringify(this.state.rangeValue)}</code>
      </div>
      <Slider value={this.state.value} onChange={onChange} />
      <RangeSlider value={this.state.rangeValue} onChange={onChangeRange} />
    </div>
  }
}
export default () => <App />
Fn(value)
default: undefined
If you want to trigger an event while the user is dragging the handlers, you can use the onDrag prop which is similar to onChange, but gets triggered more often. It takes the same parameter, the value. It's not a good idea to set the value during the drag, unless you are simply passing the value of drag back to the component.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

const onDrag = (value) => {
  console.log('drag: ', value)
}

export default () => <div style={{ marginTop: 20 }}>
  <Slider onDrag={onDrag} />
  <RangeSlider onDrag={onDrag} />
</div>
Fn(value)
default: undefined
Called when handle dragging stops.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

const onDragEnd = (value) => {
  console.log('drag stop: ', value)
}

export default () => <div style={{ marginTop: 20 }}>
  <Slider onDragEnd={onDragEnd} />
  <RangeSlider onDragEnd={onDragEnd} />
</div>
Fn(value)
default: undefined
Called when handle dragging starts.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'

const onDragStart = (value) => {
  console.log('drag start: ', value)
}

export default () => <div style={{ marginTop: 20 }}>
  <Slider onDragStart={onDragStart} />
  <RangeSlider onDragStart={onDragStart} />
</div>
Object
default: undefined
Complementary to the handleSize prop, handleStyles will apply aditional styling directly to the handle nodes.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

const style = {borderRadius:'50%', backgroundColor:'#036'}
export default () => <div style={{ marginTop: 20 }}>
  <Slider handleStyle={style}  />
  <RangeSlider handleStyle={style}  />
</div>
Object
default: undefined
Will apply the given style to all ticks.
For more information see ticks page.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

const style = { backgroundColor: '#e9580a', width: 2 }
export default () => <div style={{ marginTop: 20 }}>
  <Slider tickStyle={style} />
</div>
Object
default: undefined
The trackFillStyle gets applied to the selected interval of the slider.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import RangeSlider from '@zippytech/react-toolkit/Slider/RangeSlider'
import '@zippytech/react-toolkit/Slider/index.css'

const style = { backgroundColor: '#e9580a' }
export default () => <div style={{ marginTop: 20 }}>
  <Slider trackFillStyle={style} />
  <RangeSlider trackFillStyle={style} />
</div>
Object
default: undefined
A JavaScript style object to be applied to the track bar. Similar to trackStyle, except this does not have effect on the track background.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

const style = { border: '1px solid #e9580a', height: 15, transform: 'translateY(25px)' }
export default () => <div style={{ marginTop: 20 }}>
  <Slider trackLineStyle={style} />
</div>
Object
default: undefined
A JavaScript style object to be applied to the track bar. Similar to trackLineStyle, except its applied to the track background as well.
import React from 'react'
import Slider from '@zippytech/react-toolkit/Slider'
import '@zippytech/react-toolkit/Slider/index.css'

const style = { border: '1px solid #e9580a', height: 15, transform: 'translateY(25px)' }
export default () => <div style={{ marginTop: 20 }}>
  <Slider trackStyle={style} />
</div>