Slider now supports range

Author: kantuni

examples/widgets.py

@@ -7,7 +7,7 @@
 st.write(w1)
 
 st.subheader('Slider')
-w2 = st.slider('Age', 32, 0, 100, 1)
+w2 = st.slider('Age', [32.5, 72.5], 0, 100, 0.5)
 st.write(w2)
 
 st.subheader('Textarea')

frontend/src/components/widgets/Slider/Slider.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react'
 // @ts-ignore
-import { Slider as UISlider } from 'baseui/slider';
+import { Slider as UISlider } from 'baseui/slider'
 import { Map as ImmutableMap } from 'immutable'
 import { WidgetStateManager } from 'lib/WidgetStateManager'
 import { PureStreamlitElement, StState } from 'components/shared/StreamlitElement/'
@@ -21,6 +21,10 @@ interface State extends StState {
   value: number[];
 }
 
+interface SliderValue {
+  value: number[];
+}
+
 class Slider extends PureStreamlitElement<Props, State> {
   public constructor(props: Props) {
     super(props)
@@ -33,9 +37,8 @@ class Slider extends PureStreamlitElement<Props, State> {
     this.props.widgetMgr.sendUpdateWidgetsMessage()
   }
 
-  private handleChange = (e: any) => {
+  private handleChange = ({ value }: SliderValue) => {
     const widgetId = this.props.element.get('id')
-    const value = e.value
 
     this.setState({ value })
     this.props.widgetMgr.setFloatArrayValue(widgetId, value)

frontend/src/lib/WidgetStateManager.ts

@@ -1,11 +1,10 @@
-import {BackMsg, IBackMsg, WidgetState, WidgetStates} from 'autogen/protobuf'
-
+import {IBackMsg, BackMsg, FloatArray, WidgetState, WidgetStates} from 'autogen/protobuf'
 
 /**
  * Manages widget values, and sends widget update messages back to the server.
  */
 export class WidgetStateManager {
-  /** Called to deliver a message to the server */
+  // Called to deliver a message to the server
   private readonly sendBackMsg: (msg: IBackMsg) => void
 
   private readonly widgetStates: Map<string, WidgetState> = new Map<string, WidgetState>()
@@ -38,8 +37,8 @@ export class WidgetStateManager {
     this.getOrCreateWidgetStateProto(widgetId).stringValue = value
   }
 
-  public setFloatArrayValue(widgetId: string, value: WidgetState.IFloatArray): void {
-    this.getOrCreateWidgetStateProto(widgetId).floatArrayValue = value
+  public setFloatArrayValue(widgetId: string, value: number[]): void {
+    this.getOrCreateWidgetStateProto(widgetId).floatArrayValue = FloatArray.fromObject({ value })
   }
 
   public sendUpdateWidgetsMessage(): void {
@@ -59,7 +58,7 @@ export class WidgetStateManager {
   private getOrCreateWidgetStateProto(id: string): WidgetState {
     let state = this.getWidgetStateProto(id)
     if (state == null) {
-      state = new WidgetState({id: id})
+      state = new WidgetState({ id })
       this.widgetStates.set(id, state)
     }
     return state
@@ -99,5 +98,4 @@ export class WidgetStateManager {
     this.latestPendingMessage = undefined
     this.widgetThrottleTimer = undefined
   }
-
 }

lib/streamlit/DeltaGenerator.py

@@ -5,6 +5,7 @@
 # Python 2/3 compatibility
 from __future__ import print_function, division, unicode_literals, absolute_import
 from streamlit.compatibility import setup_2_3_shims
+
 setup_2_3_shims(globals())
 
 import functools
@@ -20,8 +21,8 @@
 
 # setup logging
 from streamlit.logger import get_logger
-LOGGER = get_logger(__name__)
 
+LOGGER = get_logger(__name__)
 
 MAX_DELTA_BYTES = 14 * 1024 * 1024  # 14MB
 
@@ -70,9 +71,11 @@ def some_function(self, unused_element_argument, stuff):
     function as above, the wrapped function will be called this way:
         dg.some_function(None, stuff)
     """
+
     @_wraps_with_cleaned_sig(method)
     def wrapped_method(self, *args, **kwargs):
         return method(self, None, *args, **kwargs)
+
     return wrapped_method
 
 
@@ -96,11 +99,13 @@ def _with_element(method):
         A new DeltaGenerator method with arguments (self, ...)
 
     """
+
     @_wraps_with_cleaned_sig(method)
     def wrapped_method(self, *args, **kwargs):
         try:
             def marshall_element(element):
                 return method(self, element, *args, **kwargs)
+
             return self._enqueue_new_element_delta(marshall_element)
         except Exception as e:
             # First, write the delta to stderr.
@@ -131,6 +136,7 @@ def wrapper(dg, element, *args, **kwargs):
             ctx.widgets.get_widget_value(widget_id) if ctx else None
         )
         return f(dg, element, ui_value, *args, **kwargs)
+
     return wrapper
 
 
@@ -570,6 +576,7 @@ def dataframe(self, _, data=None):
 
         def set_data_frame(delta):
             data_frame_proto.marshall_data_frame(data, delta.data_frame)
+
         return self._enqueue_new_element_delta(set_data_frame)
 
     # TODO: Either remove this or make it public. This is only used in the
@@ -833,8 +840,8 @@ def graphviz_chart(self, element, figure_or_dot, width=0, height=0):
 
     @_with_element
     def plotly_chart(
-            self, element, figure_or_data, width=0, height=0,
-            sharing='streamlit', **kwargs):
+        self, element, figure_or_data, width=0, height=0,
+        sharing='streamlit', **kwargs):
         """Display an interactive Plotly chart.
 
         Plotly is a charting library for Python. The arguments to this function
@@ -1029,8 +1036,8 @@ def bokeh_chart(self, element, figure):
     # TODO: Make this accept files and strings/bytes as input.
     @_with_element
     def image(
-            self, element, image, caption=None, width=None,
-            use_column_width=False, clamp=False):
+        self, element, image, caption=None, width=None,
+        use_column_width=False, clamp=False):
         """Display an image or list of images.
 
         Parameters
@@ -1179,11 +1186,13 @@ def slider(self, element, ui_value, label, value=0, min_value=0, max_value=100,
         """Slider doc string."""
         current_value = ui_value if ui_value is not None else value
         element.slider.label = label
-        if type(current_value) is list:
-            assert len(current_value) <= 2
-            element.slider.value[:] = current_value
+        if isinstance(current_value, list):
+            assert len(current_value) == 2
+        elif isinstance(current_value, (int, float)):
+            current_value = [current_value]
         else:
-            element.slider.value[:] = [current_value]
+            current_value = getattr(current_value, 'value')
+        element.slider.value[:] = current_value
         element.slider.min = min_value
         element.slider.max = max_value
         element.slider.step = step

protobuf/BackMsg.proto

@@ -25,7 +25,7 @@ message BackMsg {
     // Requests that the report's execution be stopped
     bool stop_report = 7;
 
-//    string widget_json = 8;
+    // string widget_json = 8;
 
     WidgetStates update_widgets = 9;
   }
@@ -55,8 +55,8 @@ message WidgetState {
     string string_value = 6;
     FloatArray float_array_value = 7;
   }
+}
 
-  message FloatArray {
-    repeated float float_array_value = 8;
-  }
+message FloatArray {
+  repeated float value = 1;
 }