--- tags: [gradio-custom-component, Slider, leaderboards, forms, filtering, slider] title: gradio_rangeslider short_description: 🛝 Slider component for selecting a range of values colorFrom: blue colorTo: yellow sdk: gradio pinned: false app_file: app.py --- # `gradio_rangeslider` 🛝 Slider component for selecting a range of values. ## Installation ```bash pip install gradio_rangeslider ``` ## Usage The `RangeSlider` functions similarly to the core Gradio `Slider` except that it shows two draggable thumbtracks. The `value` of the component is a tuple of the two endpoints of the range. ```python import gradio as gr from gradio_rangeslider import RangeSlider text = "## The range is: {min} to {max}" with gr.Blocks() as demo: gr.Markdown("""## 🛝 RangeSlider Drag either end and see the selected endpoints update in real-time. """) range_slider = RangeSlider(minimum=0, maximum=100, value=(0, 100)) range_ = gr.Markdown(value=text.format(min=0, max=100)) range_slider.change(lambda s: text.format(min=s[0], max=s[1]), range_slider, range_, show_progress="hide") if __name__ == "__main__": demo.launch() ``` ## `RangeSlider` ### Initialization
name | type | default | description |
---|---|---|---|
minimum |
```python float ``` | 0 |
minimum value for slider. |
maximum |
```python float ``` | 100 |
maximum value for slider. |
value |
```python tuple[float, float] | Callable | None ``` | None |
default value. If callable, the function will be called whenever the app loads to set the initial value of the component. Ignored if randomized=True. |
step |
```python float | None ``` | None |
increment between slider values. |
label |
```python str | None ``` | None |
The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. |
info |
```python str | None ``` | None |
additional component description. |
every |
```python float | None ``` | None |
If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute. |
show_label |
```python bool | None ``` | None |
if True, will display label. |
container |
```python bool ``` | True |
If True, will place the component in a container - providing some extra padding around the border. |
scale |
```python int | None ``` | None |
relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. |
min_width |
```python int ``` | 160 |
minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. |
interactive |
```python bool | None ``` | None |
if True, slider will be adjustable; if False, adjusting will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. |
visible |
```python bool ``` | True |
If False, component will be hidden. |
elem_id |
```python str | None ``` | None |
An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. |
elem_classes |
```python list[str] | str | None ``` | None |
An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. |
render |
```python bool ``` | True |
If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. |