https://github.com/hezhii/react-native-mark-slider

A marked slider component base on React Native Slider component.
https://github.com/hezhii/react-native-mark-slider

component marks react-native slider

Last synced: about 5 hours ago
JSON representation

A marked slider component base on React Native Slider component.

• Host: GitHub
• URL: https://github.com/hezhii/react-native-mark-slider
• Owner: hezhii
• Created: 2018-12-04T15:34:50.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-24T15:29:30.000Z (almost 6 years ago)
• Last Synced: 2024-11-13T04:09:35.448Z (7 days ago)
• Topics: component, marks, react-native, slider
• Language: Objective-C
• Homepage:
• Size: 201 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-native-mark-slider

A marked slider component base on React Native [Slider component](https://facebook.github.io/react-native/docs/slider).



## Usage

```bash

$ npm i react-native-mark-slider

```

```js

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 (

        

           this.setState({ value })}

          />

          

            Value：{this.state.value}

          

        

    );

  }

}

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.|