Add optional numerical input box to dcc.Slider

src/components/Slider.react.js

@@ -115,10 +115,40 @@ Slider.propTypes = {
     }),
 
     /**
-     * Value by which increments or decrements are made
+     * Value by which increments or decrements are made.
      */
     step: PropTypes.number,
 
+    /**
+     * If true, display an Input component whose value is synced with the Slider's value.
+     */
+    syncedInput: PropTypes.bool,
+
+    /**
+     * The classname to be given to the synced Input component.
+     */
+    syncedInputClassName: PropTypes.string,
+
+    /**
+     * The CSS to be applied to the class of the input (div).
+     */
+    syncedInputStyle: PropTypes.object,
+
+    /**
+     * The id to be applied to the input (div). Default is "syncedInput".
+     */
+    syncedInputID: PropTypes.string,
+
+    /**
+     * The CSS to be applied to the class of the slider (div).
+     */
+    style: PropTypes.object,
+
+    /**
+     * The amount of time the synced Input should wait before passing along state changes without a change of focus or the user pressing Enter. In milliseconds.
+     */
+    syncedInputDebounceTime: PropTypes.number,
+
     /**
      * If true, the slider will be vertical
      */
@@ -199,6 +229,8 @@ Slider.defaultProps = {
     persisted_props: ['value'],
     persistence_type: 'local',
     verticalHeight: 400,
+    syncedInputDebounceTime: 450,
+    syncedInputID: 'syncedInput',
 };
 
 export const propTypes = Slider.propTypes;

src/fragments/Slider.react.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import ReactSlider, {createSliderWithTooltip} from 'rc-slider';
 import {assoc, omit, pickBy} from 'ramda';
 import computeSliderStyle from '../utils/computeSliderStyle';
+import Input from '../components/Input.react.js';
 
 import 'rc-slider/assets/index.css';
 
@@ -16,8 +17,20 @@ export default class Slider extends Component {
         this.DashSlider = props.tooltip
             ? createSliderWithTooltip(ReactSlider)
             : ReactSlider;
+        this.SyncedInput = Input;
         this._computeStyle = computeSliderStyle();
         this.state = {value: props.value};
+        this.syncInput = this.syncInput.bind(this);
+    }
+
+    syncInput(event) {
+        if (event) {
+            this.setState({value: Number(event.target.value)});
+            this.props.setProps({
+                value: Number(event.target.value),
+                drag_value: Number(event.target.value),
+            });
+        }
     }
 
     UNSAFE_componentWillReceiveProps(newProps) {
@@ -47,6 +60,13 @@ export default class Slider extends Component {
             setProps,
             tooltip,
             updatemode,
+            syncedInput,
+            syncedInputDebounceTime,
+            syncedInputClassName,
+            syncedInputStyle,
+            syncedInputID,
+            style,
+            step,
             vertical,
             verticalHeight,
         } = this.props;
@@ -72,15 +92,57 @@ export default class Slider extends Component {
               )
             : this.props.marks;
 
+        const computedStyle = this._computeStyle(
+            vertical,
+            verticalHeight,
+            tooltip
+        );
+
+        const defaultInputStyle = {
+            width: '60px',
+            marginRight: vertical && syncedInput ? '' : '25px',
+            marginBottom: vertical && syncedInput ? '25px' : '',
+        };
+
         return (
             <div
                 id={id}
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }
                 className={className}
-                style={this._computeStyle(vertical, verticalHeight, tooltip)}
+                style={{...computedStyle, ...style}}
             >
+                {syncedInput ? (
+                    <this.SyncedInput
+                        onChange={event => {
+                            event.persist();
+                            if (this.timeout) {
+                                clearTimeout(this.timeout);
+                            }
+                            this.timeout = setTimeout(
+                                function() {
+                                    this.syncInput(event);
+                                }.bind(this),
+                                syncedInputDebounceTime
+                            );
+                        }}
+                        onBlur={event => {
+                            this.syncInput(event);
+                        }}
+                        onKeyPress={event => {
+                            if (event.key === 'Enter') {
+                                this.syncInput();
+                            }
+                        }}
+                        type="number"
+                        value={value}
+                        step={step}
+                        className={syncedInputClassName}
+                        id={syncedInputID}
+                        style={{...defaultInputStyle, ...syncedInputStyle}}
+                    />
+                ) : null}
                 <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {

src/utils/computeSliderStyle.js

@@ -4,10 +4,12 @@ export default () => {
     return memoizeWith(identity, (vertical, verticalHeight, tooltip) => {
         const style = {
             padding: '25px',
+            display: 'flex',
         };
 
         if (vertical) {
             style.height = verticalHeight + 'px';
+            style.flexDirection = 'column';
 
             if (
                 !tooltip ||
@@ -28,6 +30,7 @@ export default () => {
             ) {
                 style.paddingTop = '0px';
             }
+            style.alignItems = 'center';
         }
 
         return style;

tests/integration/sliders/test_sliders.py

@@ -241,3 +241,102 @@ def update_output(value):
     dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5-15")
     dash_dcc.release()
     dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")
+
+
+def test_slsl008_horizontal_slider_with_input(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Slider(
+                id="slider",
+                min=0,
+                max=20,
+                step=1,
+                value=5,
+                syncedInput=True,
+                syncedInputID="syncedInput",
+                tooltip={"always_visible": True},
+            ),
+            html.Div(id="out"),
+        ]
+    )
+
+    @app.callback(Output("out", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return "You have selected {}".format(value)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 5")
+
+    input_ = dash_dcc.find_element("#syncedInput")
+
+    input_.clear()
+    input_.send_keys("8")
+
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 8")
+
+
+def test_slsl009_vertical_slider_with_input(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Slider(
+                id="slider",
+                min=0,
+                max=20,
+                step=1,
+                value=5,
+                vertical=True,
+                syncedInput=True,
+                syncedInputID="arbitraryID",
+                tooltip={"always_visible": True},
+            ),
+            html.Div(id="out"),
+        ]
+    )
+
+    @app.callback(Output("out", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return "You have selected {}".format(value)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 5")
+
+    input_ = dash_dcc.find_element("#arbitraryID")
+
+    input_.clear()
+    input_.send_keys("8")
+
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 8")
+
+
+def test_slsl010_horizontal_slider_with_input(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Slider(
+                id="slider",
+                min=0,
+                max=20,
+                step=1,
+                value=5,
+                vertical=True,
+                syncedInput=True,
+                syncedInputClassName="slider-input",
+                syncedInputID="arbitraryID",
+                tooltip={"always_visible": True},
+            ),
+            html.Div(id="out"),
+        ]
+    )
+
+    @app.callback(Output("out", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return "You have selected {}".format(value)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 5")
+
+    input_ = dash_dcc.find_element("#arbitraryID")
+
+    assert input_.get_attribute("class") == "slider-input"

tests/test_integration_1.py

@@ -156,6 +156,61 @@ def test_vertical_slider(self):
         for entry in self.get_log():
             raise Exception("browser error logged during test", entry)
 
+    def test_horizontal_slider_with_input(self):
+        app = dash.Dash(__name__)
+
+        app.layout = html.Div(
+            [
+                html.Label("Horizontal Slider with Input"),
+                dcc.Slider(
+                    id="horizontal-slider-with-input",
+                    min=0,
+                    max=9,
+                    value=5,
+                    syncedInputClassName="arbitraryClassName",
+                    syncedInput=True,
+                ),
+            ],
+            style={"height": "500px"},
+        )
+        self.startServer(app)
+
+        self.wait_for_element_by_css_selector("#horizontal-slider-with-input")
+        self.wait_for_element_by_css_selector(".arbitraryClassName")
+
+        self.snapshot("horizontal slider with input")
+
+        for entry in self.get_log():
+            raise Exception("browser error logged during test", entry)
+
+    def test_vertical_slider_with_input(self):
+        app = dash.Dash(__name__)
+
+        app.layout = html.Div(
+            [
+                html.Label("Vertical Slider with Input"),
+                dcc.Slider(
+                    id="vertical-slider-with-input",
+                    min=0,
+                    max=9,
+                    value=5,
+                    vertical=True,
+                    syncedInputClassName="arbitraryClassName",
+                    syncedInput=True,
+                ),
+            ],
+            style={"height": "500px"},
+        )
+        self.startServer(app)
+
+        self.wait_for_element_by_css_selector("#vertical-slider-with-input")
+        self.wait_for_element_by_css_selector(".arbitraryClassName")
+
+        self.snapshot("vertical slider with input")
+
+        for entry in self.get_log():
+            raise Exception("browser error logged during test", entry)
+
     def test_loading_range_slider(self):
         lock = Lock()