react-native-mark-slider

A marked slider component base on React Native Slider component.

Usage

$ npm i react-native-mark-slider

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import MarkSlider from 'react-native-mark-slider';

export default class App extends Component {
  state = {
    value: 0,
  };

  render() {
    const marks = [
      { name: '0℃', value: 0 },
      { name: '16℃', value: 16 },
      { name: '30℃', value: 30 },
    ];
    return (
        <View style={styles.container}>
          <MarkSlider
              step={1}
              max={30}
              marks={marks}
              onChange={value => this.setState({ value })}
          />
          <View style={{ alignItems: 'center' }}>
            <Text>Value：{this.state.value}</Text>
          </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

Configuration

Support all the properties of React Native Slider, except some property names that have been adjusted.

|Property|Type|Default|Description| |:---|:---|:---|:---| |marks|object[]|null|Tick marks of slider.The item value must be number, and must in closed interval min, max. | |min|number|0|Initial minimum value of the slider.| |max|number|1|Initial maximum value of the slider.| |onChange|function|null|Callback continuously called while the user is dragging the slider.| |onAfterChange|function|null|Callback that is called when the user releases the slider.|