Problem: when use this component in real mobile phone, with two HandleComponent to make a range value like ArBNB, it has a big delay in change value.
Run this components in Real Mobile Phone.
In this gif I show in browser desktop simulated a phone, in this case we do not have problem. Only in real phone.
Component.js
// @flow weak
import React from "react";
import PropTypes from "prop-types";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
// *******************************************************
// RAIL COMPONENT - Barra relative - fica por baixo
// *******************************************************
const railStyle = theme => ({
root: {
position: "absolute",
width: "100%",
height: 10,
borderRadius: 7,
cursor: "pointer",
backgroundColor: theme.palette.grey[200]
}
});
function RailComponent({ classes, getRailProps }) {
return <div className={classes.root} {...getRailProps()} />;
}
RailComponent.propTypes = {
classes: PropTypes.object.isRequired,
getRailProps: PropTypes.func.isRequired
};
export const Rail = withStyles(railStyle)(RailComponent);
// *******************************************************
// HANDLE COMPONENT - Bolinhas
// *******************************************************
const handleStyle = theme => ({
root: {
position: "absolute",
marginLeft: "-11px",
marginTop: "-6px",
zIndex: 2,
width: 24,
height: 24,
cursor: "pointer",
borderRadius: "50%",
boxShadow: "1px 1px 1px 1px rgba(0, 0, 0, 0.2)",
border: theme.palette.primary.contrastText,
backgroundColor: "#f15a22"
}
});
function HandleComponent({
divOrButton: Comp,
domain: [min, max],
handle: { id, value, percent },
classes,
getHandleProps
}) {
return (
<Comp
role="slider"
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={value}
className={classes.root}
style={{ left: `${percent}%` }}
{...getHandleProps(id)}
/>
);
}
HandleComponent.propTypes = {
divOrButton: PropTypes.oneOf(["div", "button"]).isRequired,
domain: PropTypes.array.isRequired,
handle: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired
}).isRequired,
classes: PropTypes.object.isRequired,
getHandleProps: PropTypes.func.isRequired
};
HandleComponent.defaultProps = {
divOrButton: "div"
};
export const Handle = withStyles(handleStyle)(HandleComponent);
// *******************************************************
// TRACK COMPONENT -- BARRA Absolute
// *******************************************************
const trackStyle = theme => ({
root: {
position: "absolute",
height: 10,
zIndex: 1,
borderRadius: 7,
cursor: "pointer",
backgroundColor: "#f15a22"
}
});
function TrackComponent({ classes, source, target, getTrackProps }) {
return (
<div
className={classes.root}
style={{
left: `${source.percent}%`,
width: `${target.percent - source.percent}%`
}}
{...getTrackProps()}
/>
);
}
TrackComponent.propTypes = {
source: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired
}).isRequired,
target: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired
}).isRequired,
classes: PropTypes.object.isRequired,
getTrackProps: PropTypes.func.isRequired
};
export const Track = withStyles(trackStyle)(TrackComponent);
// *******************************************************
// TICK COMPONENT
// *******************************************************
const tickStyle = theme => ({
tick: {
position: "absolute",
marginTop: 14,
width: 1,
height: 5,
backgroundColor: theme.palette.text.primary
},
label: {
position: "absolute",
marginTop: 22,
textAlign: "center"
}
});
export function TickComponent({ classes, tick, count, format }) {
return (
<div>
<div className={classes.tick} style={{ left: `${tick.percent}%` }} />
<Typography
className={classes.label}
style={{
marginLeft: `${-(100 / count) / 2}%`,
width: `${100 / count}%`,
left: `${tick.percent}%`
}}
>
{format(tick.value)}
</Typography>
</div>
);
}
TickComponent.propTypes = {
tick: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired
}).isRequired,
classes: PropTypes.object.isRequired,
count: PropTypes.number.isRequired,
format: PropTypes.func.isRequired
};
TickComponent.defaultProps = {
format: d => d
};
export const Tick = withStyles(tickStyle)(TickComponent);
InputRange.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import Slider, { Handles, Tracks, Ticks } from "react-compound-slider";
import { withStyles } from "@material-ui/core/styles";
import { Rail, Handle, Track, Tick } from "./Component";
const style = () => ({
root: {
height: 120,
width: "90%",
margin: "0 auto"
},
slider: {
position: "relative",
width: "100%"
}
});
const domain = [100, 500];
const defaultValues = [150, 450];
class InputRangeMT extends Component {
state = {
values: defaultValues.slice(),
update: defaultValues.slice()
};
onUpdate = update => {
this.setState({ update });
};
onChange = values => {
console.log("VALUES", values);
this.setState({ values });
};
render() {
const {
props: { classes },
state: { values, update }
} = this;
return (
<div className={classes.root}>
<Slider
mode={2}
step={10}
domain={domain}
className={classes.slider}
onUpdate={this.onUpdate}
onChange={this.onChange}
values={values}
>
{/* <div>E ai Manoel</div> */}
<Slider.Rail>
{({ getRailProps }) => <Rail getRailProps={getRailProps} />}
</Slider.Rail>
<Handles>
{({ handles, getHandleProps }) => (
<div>
{handles.map(handle => (
<Handle
key={handle.id}
handle={handle}
domain={domain}
getHandleProps={getHandleProps}
/>
))}
</div>
)}
</Handles>
<Tracks left={false} right={false}>
{({ tracks, getTrackProps }) => (
<div>
{tracks.map(({ id, source, target }) => (
<Track
key={id}
source={source}
target={target}
getTrackProps={getTrackProps}
/>
))}
</div>
)}
</Tracks>
{/* <Ticks count={2}>
{({ ticks }) => (
<div>
{ticks.map(tick => (
<Tick key={tick.id} tick={tick} count={ticks.length} />
))}
</div>
)}
</Ticks> */}
</Slider>
</div>
);
}
}
InputRangeMT.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(style)(InputRangeMT);