Range

The range component lets users select from a range of values by moving the slider knob.

Usage

import React from 'react'
import Range from '../index'
import {Colors} from 'arivaa-basic/styles'

var view = function () {
    return (
        <Range
            step={1}
            value={50}
            minimumValue={1}
            maximumValue={100}
            minimumTrackTintColor={Colors.brandGrey}
            maximumTrackTintColor={'#e6e6e6'}
            onChange={this.onChange.bind(this)}
        />
    )
}
module.exports = view

 

Supported properties

Properties	Descrition	Type	Default
step	it is integral value of interval of range.	number	-
value	selected value of range by default	number	-
minimumValue	it is starting point of range.	number	0
maximumValue	it is ending point of range	number	1
minimumTrackTintColor	colour of track which is selected.	string	' # 157cf7'
maximumTrackTintColor	colour of track which is not selected	string	' # b3b3b3'
onChange	it is a function called when user changes level. It has a parameter represented new level of the component.	function	-