ashvin27 / react-time-range-slider Goto Github PK

Can someone give a basic sample code of react-time-range-slider using the functional component?

In the following line hours/minutes are numeric, so the calling hours.length will return undefined value. Thus leading zero are not added.

I noticed the maxValue and minValue is not working correctly for example:

 const valueRange: {
      start: "00:00",
      end: "23:59"
    }
const value: { 
  start: "08:30",
 end: "11:30"
}
<template>
<TimeRangeSlider
          format={24}
          disabled={false}
	draggableTrack={true}
          maxValue={valueRange.end}
          minValue={valueRange.start}
          name={"time_range"}
          step={15}
          value={this.value}/>
</template>

Expected: for the above code the draggableTrack shouldn't be draggable when it reach to it maxValue and same for minValue.

Current: I can drag the track about the maxValue and same for minValue.

I'm using formik with yup in my form and I Wanna call manually the onChange of formik in my own onChange function, but I realized that onChange of the TimeRangeSlider just has the current value.

        <TimeRangeSlider
               disabled={!values[day.value]}
               format={24}
               maxValue="23:59"
               minValue="00:00"
               name={`${day.value}Range`}
               onChange={value => { 
                     onChange(); //here I wanna pass the event object
                     setFieldValue(`${day.value}Range`, value)
              }}
               step={15}
               value={values[`${day.value}Range`]} />

running the latest NextJs' build command while using this library causes the build to fail. I tracked it down to the css required in the dist/index.js file. Would like to propose that the css be imported by the user in their app and not something you require/import within your dist.

See PR.

Step appears to be 15 minutes despite of the value provided. Checked in /dist/index.js and it does not seem to have a function that would implement step change.
Please make changes or allow access to repo so I could create a PR for this.
Thank you