tajo / react-range

🎚️Range input with a slider. Accessible. Bring your own styles and markup.
https://react-range.pages.dev
MIT License
850 stars 97 forks source link

[Question & Request] Get event ondragEnter and OnDragEnd #129

Open c0ncentus opened 3 years ago

c0ncentus commented 3 years ago

Hi,

I want make that https://codepen.io/c0ncentus/pen/LYRKdpL so the simplest way to customize it is with your component (thanks) .... Wait .... can you detect (event) when user dragEnter and leave the drag ?

I have wrapp with div tag and that is not work : / Currently support or not ?

Thanks to make React better 🤟

gorhawk commented 3 years ago

If I understand this ticket correctly, this is something that I also wondered. I'm using this library with react-player, which is a player that is constantly updating its progress. So what I would need to do is detect when we are seeking, so I can stop updating my react-range instance. This could probably work by exposing this: isDragged: this.state.draggedThumbIndex > -1 with the help of an event for example: onDragStart and onDragEnd (which is probably = onFinalChange, that is already available)

tajo commented 3 years ago

onDragStart and onDragEnd (which is probably = onFinalChange

right, onDragStart could be added, you might be also able to just use onChange to detect when user starts moving the thumb

gorhawk commented 3 years ago

Example for posterity:

import * as React from 'react';
import { Range } from 'react-range';

class SuperSimple extends React.Component {
  state = { values: [50], isDragging: false };
  render() {
    return (
      <Range
        step={0.1}
        min={0}
        max={100}
        values={this.state.values}
        onChange={(values) => {this.setState({ values, isDragging: true })}
        onFinalChange={(values) => this.setState({ isDragging: false })}
        // ...
      />
    );
  }
}