Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Slider] onDragStop and onDragStart events have no value #4926

Closed
jdelafon opened this issue Aug 8, 2016 · 5 comments
Closed

[Slider] onDragStop and onDragStart events have no value #4926

jdelafon opened this issue Aug 8, 2016 · 5 comments
Labels
component: slider This is the name of the generic UI component, not the React module! v0.x

Comments

@jdelafon
Copy link

jdelafon commented Aug 8, 2016

Problem description

One cannot access the Slider's value on events onDragStop and onDragStart.
Edit: neither does onMouseUp work. Only onChange gets the event value attached.

I did injectTapEventPlugin();.

Steps to reproduce

<Slider onDragStop={this.onTest} ... />

onTest(e, value) {
    console.log(e, value, e.target.value)
}  

Returns: Event, undefined, undefined.

Versions

  • Material-UI: 0.15.2
  • React: 15.2.1
  • Browser: Chrome
@jdelafon jdelafon changed the title onDragStop and onDragStart Slider events have no value [Slider] onDragStop and onDragStart events have no value Aug 8, 2016
@stephenkingsley
Copy link

I think is you event bind wrong.

I wrote a demo for you, and the value is right.

import React from 'react';
import Slider from '../src/Slider';

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

/**
 * `SelectField` supports a floating label with the `floatingLabelText` property. This can be fixed in place with the
 * `floatingLabelFixed property, and can be customised with the `floatingLabelText` property.
 */
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  changeSlider(event, value) {
    console.log(value);
  }

  render() {
    return (
      <Slider
        defaultValue={1}
        onChange={(event, value) => this.changeSlider(event, value)}
      />
    );
  }
}

@jdelafon
Copy link
Author

This is onChange in your example. onChange works fine. onDragStop does not.

@karlfloersch
Copy link

Related PR: #4712

@oliviertassinari oliviertassinari added the component: slider This is the name of the generic UI component, not the React module! label Dec 18, 2016
@FrenchTechLead
Copy link

I have this use-case where the slider's value is changed with a timer (setInterval) but it can be changed by the user if he slides the slider, the problem is that i want to catch the change of the value only if the user slides the slider and this is impossible right now :( because the event we get from onDragStop doesn't have a value attribute.

@oliviertassinari
Copy link
Member

We plan on migrating the component to the v1-beta branch. I'm closing the issue for #4793.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: slider This is the name of the generic UI component, not the React module! v0.x
Projects
None yet
Development

No branches or pull requests

5 participants