Skip to content

Instantly share code, notes, and snippets.

@jonatan-alama
Created April 29, 2016 02:05
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jonatan-alama/208d8d6e8634f6075862d70cabe3a770 to your computer and use it in GitHub Desktop.
import * as React from "react";
import * as ReactDOM from "react-dom";
interface ReactSliderAppState {
value: number;
}
class ReactSliderApp extends React.Component<void, ReactSliderAppState> {
constructor() {
super();
this.state = {
value: 0
};
}
onChange(newValue: number) {
this.setState({
value: newValue
});
}
render() {
return (
<div className="react-slider-app">
<SliderValue value={this.state.value} />
<JQueryUISlider
value={this.state.value}
onChange={(newValue: number ) => this.onChange(newValue)} />
</div>
);
}
}
interface SliderValueProps {
value: number;
}
class SliderValue extends React.Component<SliderValueProps, void> {
render() {
return (
<div>The current value is: {this.props.value}</div>
);
}
}
interface JQueryUISliderProps {
value: number;
onChange: (newValue: number) => void;
}
class JQueryUISlider extends React.Component<JQueryUISliderProps, void> {
componentDidMount() {
const parent = ReactDOM.findDOMNode(this);
const slider = $(parent).slider({
min: 0,
max: 100,
value: this.props.value,
change: (evt: Event, ui: any) => {
this.props.onChange(ui.value);
}
});
}
componentWillUnmount() {
const parent = ReactDOM.findDOMNode(this);
$(parent).slider("destroy");
}
shouldComponentUpdate() {
return false;
}
render() {
return (
<div></div>
);
}
}
ReactDOM.render(
<ReactSliderApp />,
document.getElementById("app")
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment