diff --git a/superset/assets/src/visualizations/PlaySlider.css b/superset/assets/src/visualizations/PlaySlider.css
index 7de07de54a..df0fe77dba 100644
--- a/superset/assets/src/visualizations/PlaySlider.css
+++ b/superset/assets/src/visualizations/PlaySlider.css
@@ -1,8 +1,8 @@
.play-slider {
- position: absolute;
- bottom: -16px;
+ position: relative;
height: 20px;
width: 100%;
+ margin: 0;
}
.slider-selection {
@@ -21,3 +21,7 @@
color: #b3b3b3;
margin-right: 5px;
}
+
+div.slider > div.tooltip.tooltip-main.top.in {
+ margin-left: 0 !important;
+}
diff --git a/superset/assets/src/visualizations/PlaySlider.jsx b/superset/assets/src/visualizations/PlaySlider.jsx
index b72dc635ca..107aa55a4a 100644
--- a/superset/assets/src/visualizations/PlaySlider.jsx
+++ b/superset/assets/src/visualizations/PlaySlider.jsx
@@ -21,6 +21,7 @@ const propTypes = {
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
reversed: PropTypes.bool,
disabled: PropTypes.bool,
+ range: PropTypes.bool,
};
const defaultProps = {
@@ -30,6 +31,7 @@ const defaultProps = {
orientation: 'horizontal',
reversed: false,
disabled: false,
+ range: true,
};
export default class PlaySlider extends React.PureComponent {
@@ -84,15 +86,17 @@ export default class PlaySlider extends React.PureComponent {
this.setState({ intervalId: null });
}
step() {
- if (this.props.disabled) {
+ const { start, end, step, values, disabled } = this.props;
+
+ if (disabled) {
return;
}
- let values = this.props.values.map(value => value + this.increment);
- if (values[1] > this.props.end) {
- const cr = values[0] - this.props.start;
- values = values.map(value => value - cr);
- }
- this.props.onChange(values);
+
+ const currentValues = Array.isArray(values) ? values : [values, values + step];
+ const nextValues = currentValues.map(value => value + this.increment);
+ const carriageReturn = (nextValues[1] > end) ? (nextValues[0] - start) : 0;
+
+ this.props.onChange(nextValues.map(value => value - carriageReturn));
}
formatter(values) {
if (this.props.disabled) {
@@ -108,6 +112,7 @@ export default class PlaySlider extends React.PureComponent {
return parts.map(value => (new Date(value)).toUTCString()).join(' : ');
}
render() {
+ const { start, end, step, orientation, reversed, disabled, range, values } = this.props;
return (