如何在 React-native 中以时间格式制作 RangeSlider？

Question

In my React-native project , I am using a RangeSlider. According to the documentation from the below link-

https://www.npmjs.com/package/rn-range-slider

I worked with this code-

    <RangeSlider
    style={{width: 160, height: 80}}
    gravity={'center'}
    min={200}
    max={1000}
    step={20}
    selectionColor="#3df"
    blankColor="#f618"
    onValueChanged={(low, high, fromUser) => {
        this.setState({rangeLow: low, rangeHigh: high})
    }}/> 

It works well but the problem is-

I want this slider to work in time format from the range 00:00:00 to 23:59:00

from the above mentioned document link, I am not understanding how should I set the valueType and TextFormat .

So, I need help to implement the RangeSlider to time format from the Range 00:00:00 to 23:59:00

Answer 1

Simply Add as follows valueType='time' textFormat='HH:mm:ss' min={0} max={82744000} and you are good to go.

I agree, the documentation in this area is vague. But you have to use a numeric value that would get you closest to the time period you need and 82744000 timestamp will get you there.

To learn more about the text formatting, checkout the links: Android iOS

    <RangeSlider
        style={{width: 160, height: 80}}
        gravity={'center'}
        min={0}
        max={82744000}
        valueType='time'
        textFormat='HH:mm:ss'
        step={20}
        selectionColor="#3df"
        blankColor="#f618"
        onValueChanged={(low, high, fromUser) => {
            this.setState({rangeLow: low, rangeHigh: high})
        }}
    /> 

Answer 2

You can do it like this:

<RangeSlider
  valueType="time"
  step={60000}
/>

Answer 3

import React, { Component } from 'react';

class YourComponent extends Component {

    constructor(props) {
        super(props);

        const now = new Date(1995, 11, 31, 0, 0, 0, 0);
        this.state = {
            broadcasting: false,
            astbeltProgress: 0,
            rangeLow: now,
            rangeHigh: now,
            min: now,
            max: new Date(now.getTime() + 1000 * 60 * 60 * 24-1),
        };
    }

    render() {
        const { broadcasting, astbeltProgress, rangeLow, rangeHigh, min, max } = this.state
        return (
            <View style={styles.container}>

                <RangeSlider
                    valueType="time"
                    ref={component => this._slider = component}
                    gravity={'center'}
                    labelStyle={'bubble'}
                    style={{width: screenWidth, height: 70}}
                    min={min}
                    max={max}
                    selectionColor="#3df"
                    blankColor="#f618"
                    step={1}
                    textFormat="HH:mm"
                    onValueChanged={(low, high, fromUser) => {
                        this.setState({rangeLow: low, rangeHigh: high})
                    }}
                />


            </View>
        );
    }
}