add min, max and step properties for ui.range (#3260)

nicegui/elements/range.py

@@ -27,3 +27,39 @@ class Range(ValueElement, DisableableElement):
         self._props['min'] = min
         self._props['max'] = max
         self._props['step'] = step
+
+    @property
+    def min(self) -> float:
+        """The minimum value allowed."""
+        return self._props['min']
+
+    @min.setter
+    def min(self, value: float) -> None:
+        if self._props['min'] == value:
+            return
+        self._props['min'] = value
+        self.update()
+
+    @property
+    def max(self) -> float:
+        """The maximum value allowed."""
+        return self._props['max']
+
+    @max.setter
+    def max(self, value: float) -> None:
+        if self._props['max'] == value:
+            return
+        self._props['max'] = value
+        self.update()
+
+    @property
+    def step(self) -> float:
+        """The step size between valid values."""
+        return self._props['step']
+
+    @step.setter
+    def step(self, value: float) -> None:
+        if self._props['step'] == value:
+            return
+        self._props['step'] = value
+        self.update()

website/documentation/content/range_documentation.py

@@ -11,7 +11,7 @@ def main_demo() -> None:
 
 
 @doc.demo('Customize labels', '''
-        You can customize the colors of the range and its labels by setting them individually or for the range in total.
+    You can customize the colors of the range and its labels by setting them individually or for the range in total.
 ''')
 def customize_labels():
     ui.label('Color the entire range')
@@ -23,4 +23,16 @@ def customize_labels():
         .props('label-always snap label-color="secondary" right-label-text-color="black"')
 
 
+@doc.demo('Change range limits', '''
+    This demo shows how to change the limits on the click of a button.
+''')
+def range_limits():
+    def increase_limits():
+        r.min -= 10
+        r.max += 10
+
+    ui.button('Increase limits', on_click=increase_limits)
+    r = ui.range(min=0, max=100, value={'min': 30, 'max': 70}).props('label-always')
+
+
 doc.reference(ui.range)