update ui.slider

api_docs_and_examples.py

@@ -107,7 +107,7 @@ NiceGUI comes with a collection of commonly used UI elements.
     @example('''#### Value Binding
 
 Binding values between UI elements or [to data models](http://127.0.0.1:8080/reference#bindings) is built into NiceGUI.
-''', tight=True)
+''', tight=True, skip=False)
     def binding_example():
         slider = ui.slider(min=0, max=100, value=50)
         ui.number('Value').bind_value(slider, 'value').classes('fit')
@@ -170,7 +170,7 @@ def create_full() -> None:
         switch = ui.switch('switch me')
         ui.label('Switch!').bind_visibility_from(switch, 'value')
 
-    # @example(ui.slider)
+    @example(ui.slider, skip=False)
     def slider_example():
         slider = ui.slider(min=0, max=100, value=50).props('label')
         ui.label().bind_text_from(slider, 'value')
@@ -592,7 +592,7 @@ Binding is possible for UI element properties like text, value or visibility and
 Each element provides methods like `bind_value` and `bind_visibility` to create a two-way binding with the corresponding property.
 To define a one-way binding use the `_from` and `_to` variants of these methods.
 Just pass a property of the model as parameter to these methods to create the binding.
-''')
+''', skip=False)
     def bindings_example():
         class Demo:
             def __init__(self):

nicegui/elements/old/slider.py → nicegui/elements/slider.py

@@ -1,18 +1,16 @@
 from typing import Callable, Optional
 
-import justpy as jp
+from .mixins.value_element import ValueElement
 
-from .float_element import FloatElement
 
-
-class Slider(FloatElement):
+class Slider(ValueElement):
 
     def __init__(self, *,
                  min: float,
                  max: float,
-                 step: float = 1,
+                 step: float = 1.0,
                  value: float = None,
-                 on_change: Optional[Callable] = None):
+                 on_change: Optional[Callable] = None) -> None:
         """Slider
 
         :param min: lower bound of the slider
@@ -21,6 +19,7 @@ class Slider(FloatElement):
         :param value: initial value to set position of the slider
         :param on_change: callback which is invoked when the user releases the slider
         """
-        view = jp.QSlider(min=min, max=max, step=step, change=self.handle_change, disable_input_event=True, temp=False)
-
-        super().__init__(view, value=value, on_change=on_change)
+        super().__init__(tag='q-slider', value=value, on_value_change=on_change)
+        self._props['min'] = min
+        self._props['max'] = max
+        self._props['step'] = step

nicegui/ui.py

@@ -21,6 +21,7 @@ from .elements.radio import Radio as radio
 from .elements.row import Row as row
 from .elements.select import Select as select
 from .elements.separator import Separator as separator
+from .elements.slider import Slider as slider
 from .elements.switch import Switch as switch
 from .elements.toggle import Toggle as toggle
 from .elements.tooltip import Tooltip as tooltip