Gradio RangeSlider

0.0.8 · active · verified Thu Apr 16

Gradio RangeSlider is a custom Gradio component (version 0.0.8) that provides a user interface element for selecting a range of numerical values. It extends Gradio's capabilities by offering a dual-handle slider for specifying both a minimum and maximum value within a defined range. The library requires Python >=3.8 and is maintained with a slow release cadence, having last been updated on PyPI in October 2024. [1, 4]

Common errors

```
ModuleNotFoundError: No module named 'gradio_rangeslider'
```
cause When packaging a Gradio application with PyInstaller, custom components like `gradio-rangeslider` may not have their necessary data files automatically collected, leading to this import error at runtime. [10]

fix Add `--collect-data=gradio_rangeslider` to your PyInstaller command or `.spec` file. Example: `pyinstaller --onefile --collect-data=gradio --collect-data=gradio_rangeslider your_app.py` [10].
```
TypeError: 'float' object is not subscriptable
```
cause This error typically occurs when a Python function connected to the `RangeSlider` expects a single float argument but receives the `(min_value, max_value)` tuple that `RangeSlider` outputs, and then attempts to access it like `value[0]` or `value[1]`. [2, 9]

fix Modify your Python function to correctly accept and unpack the tuple. For example, `def process_range(selected_values: tuple[float, float]): min_val, max_val = selected_values`.

Warnings

breaking The `gradio-rangeslider` component specifies compatibility with `gradio>=4.0,<6.0`. Upgrading your main `gradio` library to version `6.0` or higher may introduce breaking changes or require adjustments to how this custom component interacts with the Gradio API, due to significant changes in Gradio 6.x. [4, 12, 15]
Fix: Ensure your `gradio` installation is within the `4.x` or `5.x` range (`pip install 'gradio<6.0'`) or consult Gradio's migration guide for custom components if you must use Gradio 6.x. [12, 15]
gotcha Unlike the standard `gradio.Slider` which handles a single float value, the `gradio_rangeslider.RangeSlider` component expects and provides a `tuple[float, float]` representing the `(min_value, max_value)` of the selected range. [2, 7, 9]
Fix: Ensure that functions connected to the `RangeSlider` (e.g., via `.change()`) are designed to accept a `tuple` with two float values as input, and similarly, return a `tuple` if setting its value programmatically. For example, `def handler(selected_range: tuple[float, float]): min_val, max_val = selected_range`.

Install

pip install gradio-rangeslider Install stable version

Imports

RangeSlider

from gradio_rangeslider import RangeSlider

Quickstart

This quickstart demonstrates how to import and use the `RangeSlider` component within a Gradio `Blocks` application. It sets up a slider from 0 to 100 with a default selection and dynamically updates a Markdown component to display the chosen range as the slider is adjusted. [2]

import gradio as gr
from gradio_rangeslider import RangeSlider

def update_range_text(selected_range: tuple[float, float]) -> str:
    min_val, max_val = selected_range
    return f"Selected range: {min_val:.1f} to {max_val:.1f}"

with gr.Blocks() as demo:
    gr.Markdown("## Custom RangeSlider Demo")
    
    # Initialize RangeSlider with a default range
    range_slider = RangeSlider(
        minimum=0,
        maximum=100,
        value=(20, 80),
        label="Select a range",
        step=0.5
    )
    
    # Display the selected range
    range_output = gr.Markdown(value="Selected range: 20.0 to 80.0")

    # Connect the RangeSlider's change event to the update function
    range_slider.change(
        fn=update_range_text,
        inputs=range_slider,
        outputs=range_output,
        show_progress="hidden"
    )
    
    gr.Examples(
        [([10, 30]), ([50, 75])],
        inputs=[range_slider],
        outputs=[range_output],
        fn=update_range_text,
        label="Examples for RangeSlider"
    )

if __name__ == "__main__":
    demo.launch()

view raw JSON →