React-dynamic-time-slider NPM

React Dynamic Time Slider

Forked slider from React-time-range-slider by ashvin27. This slider was altered to be more modular. This allows you to inject as many as you need on a page while maintaining individual functionality for each instance. It is meant to output 12 hour AM/PM formatted time.

You can see a live demo 👉 Here

This slider was made to serve a very general puprose

Takes in a number value in the format of "hh:mm AM/PM"
Easy to map over state and add on to multiple days if needed
Written to work with function hooks components or React classes

Installation

with npm

npm install react-dynamic-time-slider

with yarn

yarn add react-dynamic-time-slider

Usage

Import to use inside your component. Can be used with a class or functional (hooks) component.

import Slider from 'react-dynamic-time-slider'

React Class Component Example

class App extends Component {
  constructor() {
    super()
    this.state = {
      days: [
        {
          name: 'Sunday (disabled)',
          start: "9:00 AM",
          end: "5:00 PM",
          closed: false,
          step: 1,
          id: 1,
        }
      ]
    }
    this.timeChangeHandler = this.timeChangeHandler.bind(this)
  }

  timeChangeHandler(time, targetDay) {
      /*
      time is an object that holds both start and end time.
      it will look like time: {start: start, end: end}
        you can either destructure it
      ex. const { start, end } = time
            or pass it as time.start and time.end
       */
    this.setState(prevState => {
      return {
        days: prevState.days.map(day => {
          if (day.name === targetDay.name) {
            return { ...day, start: time.start, end: time.end, updated: true }
          } else {
            return day
          }
        })
      }
    })
  }

  render() {
    return (
      <div>
        {
          this.state.days.map((day, i) => {
            return (
              <div key={i}>
              // Slider starts here 👇
                <Slider
                  disabled={day.closed}
                  draggableTrack={true}
                  start={day.start}
                  end={day.end}
                  name={day.name}
                  onChangeComplete={time => this.onChangeComplete(time, day)}
                  onChange={time => this.timeChangeHandler(time, day)}
                  onChangeStart={this.changeStartHandler}
                  step={day.step}
                />
              </div>
            )
          })
        }
      </div >
    )
  }
}

export default App;

Slider component

<Slider
    disabled={Boolean} // not required
    draggableTrack={Boolean} // not required
    start={String} // isRequired ex. "8:45 AM"
    end={String} // [String] isRequired ex. "9:15 PM"
    name={String} // [String] isRequired ex. "Monday"
    onChangeComplete={time => onChangeComplete(time, String)} // [Func(time, String)] isRequired
    onChange={time => timeChangeHandler(time, String)} // [Func(time, String)] isRequired
    onChangeStart={changeStartHandler} // [Func] isRequired
    step={Number} // [Int] not required
/>