Slider

A Slider is a widget that allows the user to select a value from a range by moving a button along a track. The slider can be oriented either horizontally or vertically, and it can be configured to snap to specific increments within the range.

Examples

Volume control

This examples shows how to use the on_change event of a slider to update a label with the current value of the slider.

import gooeypie as gp

app = gp.GooeyPieApp("Volume Control")
app.width = 500
app.height = 500
# app.theme = 'light'

def update_volume(event):
    volume_level_lbl.text = f"Volume: {volume_slider.value}"

# Create widgets
volume_slider = gp.Slider(0, 100)
volume_slider.value = 50
volume_slider.orientation = "vertical"

volume_level_lbl = gp.Label("Volume: 50")
volume_level_lbl.style.font_size = 24
volume_level_lbl.style.font_weight = "bold"
volume_level_lbl.style.text_color = "darkmagenta", "hotpink"

# Add widgets to app
app.add(volume_slider, 1, 1)
app.add(volume_level_lbl, 2, 1)

app.set_column_weights(0, 1)

# Add event listener for slider
volume_slider.on_change(update_volume)

app.run()

Color mixer

This example shows how to use three sliders to control the red, green, and blue components of a color. The background color of the window is updated in real time as the sliders are moved.

import gooeypie as gp

app = gp.GooeyPieApp("Color Mixer")
# app.theme = 'light'

def update_color(event):
    # Convert RGB values to hex
    red_hex = f"{red_slider.value:02x}"
    green_hex = f"{green_slider.value:02x}"
    blue_hex = f"{blue_slider.value:02x}"

    # Set bg color
    color_swatch_lbl.style.bg_color = f"#{red_hex}{green_hex}{blue_hex}"

    # Update label
    color_code_lbl.text = f"RGB: ({red_slider.value}, {green_slider.value}, " \
        f"{blue_slider.value})\nHEX: #{red_hex}{green_hex}{blue_hex}"


# Create sliders
red_slider = gp.Slider(0, 255, 0)
green_slider = gp.Slider(0, 255, 0)
blue_slider = gp.Slider(0, 255, 0)

# Create frame for color swatch and label
color_frame = gp.Frame()
color_swatch_lbl = gp.Label()
color_swatch_lbl.width = 100
color_swatch_lbl.height = 100

color_code_lbl = gp.Label()
color_code_lbl.width = 150

# Add widgets to frame
color_frame.add(color_swatch_lbl, 1, 1)
color_frame.add(color_code_lbl, 1, 2)

# Add widgets to app
app.add(red_slider, 1, 1)
app.add(green_slider, 1, 2)
app.add(blue_slider, 1, 3)
app.add(color_frame, 2, 1, row_span=3)

# Add event listeners for sliders
red_slider.on_change(update_color)
green_slider.on_change(update_color)
blue_slider.on_change(update_color)

# Initialise the color swatch and label
update_color(None)

app.run()

Creating a Slider widget

my_slider = gp.Slider(min_value, max_value)

Parameters

min_value (integer): The minimum value of the slider.
max_value (integer): The maximum value of the slider.

Properties

Name	Type	Description
`.value`	integer	Gets or sets the current value of the slider. Setting this property will move the slider to the position corresponding to the new value.
`.increment`	integer	Gets or sets the increment of the slider. The slider will snap to values that are multiples of the increment. For example, if the minimum value is 0, the maximum value is 100, and the increment is 10, then the slider will snap to the values 0, 10, 20, ..., 100.
`.orientation`	string	Gets or sets the orientation of the slider. Either `"horizontal"` or `"vertical"`. Default is `"horizontal"`. This property cannot be changed after the slider is added to a layout.
`.width`	integer	Gets or sets the width of the slider in pixels.
`.height`	integer	Gets or sets the height of the slider in pixels.
`.disabled`	boolean	Gets or sets whether the slider is disabled. When disabled is set to `True`, the slider does not respond to click or drag events.

Methods

This widget has no unique methods.

Events

This widget supports the following events as well as the standard events listed below.

Name	Description
`.on_change(event_function)`	The function to call when the value of the slider changes. This event is triggered whenever the user clicks on the slider or drags the slider handle to change its value, or when the value is changed programmatically.

Standard events

.on_click
.on_double_click
.on_right_click
.on_middle_click
.on_mouse_down
.on_mouse_up
.on_mouse_enter
.on_mouse_leave

Styles

How to specify colors

Colors can be specified as either a hex code (e.g. "#FF0000"), a CSS color name, or "transparent".
When specifying a color for a style, you can provide either a single color or two colors separated by a comma. If you provide two colors, the first will be used for light mode and the second for dark mode. For example, my_widget.text_color = "steelblue", "skyblue" would specify steelblue for light mode and sky blue for dark mode.

Name	Description	Default
`.style.active_bg_color`	The background color of the slider track to the left of the slider button.
`.style.inactive_bg_color`	The background color of the slider track to the right of the slider button.
`.style.button_color`	The color of the slider button.
`.style.button_disabled_color`	The color of the slider button when it is disabled.
`.style.button_hover_color`	The color of the slider button when it is hovered over.
`.style.border_color`	The color of the border of the slider button. Will not be visible unless `border_width` is greater than 0.	`"transparent"`
`.style.border_width`	The width of the border of the slider button.	`0`
`.style.corner_radius`	The radius of the corners of the slider button.