Tutorial on PyQt6 QSlider widget

The QSlider widget in PyQt6 is used to create a slider control that allows users to select a value from a range. It can be displayed horizontally or vertically and is commonly used in applications requiring input for volume control, brightness adjustment, or any value range selection.

In this tutorial, we will cover:

1. Basics of QSlider

A QSlider is created by instantiating the class, optionally specifying its orientation (horizontal or vertical). The default orientation is horizontal.

Example: Basic QSlider Setup

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider

def main():
    app = QApplication([])
    window = QMainWindow()
    window.setWindowTitle("Basic QSlider Example")
    window.setGeometry(100, 100, 300, 200)

    slider = QSlider(window)
    slider.setGeometry(50, 50, 200, 30)

    window.show()
    app.exec()

if __name__ == "__main__":
    main()

Output:

• A basic horizontal slider.

2. Configuring the Range and Orientation

You can set the range of the slider using setMinimum(), setMaximum(), or setRange(). The orientation can be set using Qt.Orientation.Horizontal or Qt.Orientation.Vertical.

Example: Slider Range and Orientation

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider
from PyQt6.QtCore import Qt

app = QApplication([])
window = QMainWindow()
window.setWindowTitle("Slider Range and Orientation Example")
window.setGeometry(100, 100, 300, 200)

# Horizontal slider
horizontal_slider = QSlider(Qt.Orientation.Horizontal, window)
horizontal_slider.setGeometry(50, 50, 200, 30)
horizontal_slider.setRange(0, 100)  # Set range from 0 to 100

# Vertical slider
vertical_slider = QSlider(Qt.Orientation.Vertical, window)
vertical_slider.setGeometry(50, 100, 30, 80)
vertical_slider.setRange(-50, 50)  # Set range from -50 to 50

window.show()
app.exec()

Output:

• A horizontal slider with a range of 0 to 100.
• A vertical slider with a range of -50 to 50.

3. Handling Signals and Retrieving Values

The valueChanged signal is emitted whenever the slider value changes. Use this signal to retrieve the current value using value().

Example: Retrieve Slider Value

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider, QLabel
from PyQt6.QtCore import Qt

def update_label(value):
    label.setText(f"Value: {value}")

app = QApplication([])
window = QMainWindow()
window.setWindowTitle("Slider Value Example")
window.setGeometry(100, 100, 300, 200)

slider = QSlider(Qt.Orientation.Horizontal, window)
slider.setGeometry(50, 50, 200, 30)
slider.setRange(0, 100)
slider.valueChanged.connect(update_label)

label = QLabel("Value: 0", window)
label.setGeometry(50, 100, 200, 30)

window.show()
app.exec()

Output:

• Displays the current slider value in a label as the slider is moved.

4. Customizing QSlider Appearance

You can customize the slider's default properties:

• setTickPosition(): Adds tick marks to the slider (NoTicks, TicksAbove, TicksBelow, TicksBothSides).
• setSingleStep(): Sets the step size for each increment.
• setPageStep(): Sets the step size for page up/down actions.

Example: Tick Marks and Step Size

slider = QSlider(Qt.Orientation.Horizontal, window)
slider.setGeometry(50, 50, 200, 30)
slider.setRange(0, 100)

# Add tick marks
slider.setTickPosition(QSlider.TickPosition.TicksBelow)
slider.setTickInterval(10)  # Tick interval

# Set step size
slider.setSingleStep(5)
slider.setPageStep(20)

5. Advanced Features (Ticks and Step Size)

You can configure the slider for better usability with tick marks and custom step sizes.

Example: Slider with Ticks and Steps

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider, QLabel
from PyQt6.QtCore import Qt

def update_label(value):
    label.setText(f"Value: {value}")

app = QApplication([])
window = QMainWindow()
window.setWindowTitle("Advanced Slider Example")
window.setGeometry(100, 100, 300, 200)

slider = QSlider(Qt.Orientation.Horizontal, window)
slider.setGeometry(50, 50, 200, 30)
slider.setRange(0, 100)

# Tick marks and intervals
slider.setTickPosition(QSlider.TickPosition.TicksBelow)
slider.setTickInterval(10)

# Step sizes
slider.setSingleStep(5)
slider.setPageStep(20)

slider.valueChanged.connect(update_label)

label = QLabel("Value: 0", window)
label.setGeometry(50, 100, 200, 30)

window.show()
app.exec()

6. Styling QSlider with CSS

The QSlider appearance can be customized using setStyleSheet().

Example: Custom Slider Style

slider.setStyleSheet("""
    QSlider::groove:horizontal {
        border: 1px solid #999999;
        height: 8px;
        background: lightgray;
        margin: 0px;
        border-radius: 4px;
    }
    QSlider::handle:horizontal {
        background: blue;
        border: 1px solid #5c5c5c;
        width: 16px;
        margin: -5px 0;
        border-radius: 8px;
    }
""")

7. Practical Examples

Example 1: Volume Control

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider, QLabel
from PyQt6.QtCore import Qt

def update_volume(value):
    label.setText(f"Volume: {value}%")

app = QApplication([])
window = QMainWindow()
window.setWindowTitle("Volume Control")
window.setGeometry(100, 100, 300, 200)

slider = QSlider(Qt.Orientation.Horizontal, window)
slider.setGeometry(50, 50, 200, 30)
slider.setRange(0, 100)
slider.setTickPosition(QSlider.TickPosition.TicksBelow)
slider.setTickInterval(10)
slider.valueChanged.connect(update_volume)

label = QLabel("Volume: 0%", window)
label.setGeometry(50, 100, 200, 30)

window.show()
app.exec()

Output:

• A slider labeled “Volume” that updates dynamically as the user adjusts the slider.

Example 2: Brightness Adjustment

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider, QLabel
from PyQt6.QtCore import Qt

def update_brightness(value):
    label.setText(f"Brightness: {value}%")

app = QApplication([])
window = QMainWindow()
window.setWindowTitle("Brightness Adjustment")
window.setGeometry(100, 100, 300, 200)

slider = QSlider(Qt.Orientation.Vertical, window)
slider.setGeometry(50, 50, 30, 100)
slider.setRange(0, 100)
slider.setTickPosition(QSlider.TickPosition.TicksLeft)
slider.setTickInterval(10)
slider.valueChanged.connect(update_brightness)

label = QLabel("Brightness: 0%", window)
label.setGeometry(100, 50, 150, 30)

window.show()
app.exec()

Output:

• A vertical slider for brightness adjustment with values displayed dynamically.

Example 3: RGB Color Mixer

from PyQt6.QtWidgets import QApplication, QMainWindow, QSlider, QLabel
from PyQt6.QtCore import Qt

def update_color():
    r = red_slider.value()
    g = green_slider.value()
    b = blue_slider.value()
    color = f"rgb({r}, {g}, {b})"
    color_display.setStyleSheet(f"background-color: {color};")
    color_label.setText(color)

app = QApplication([])
window = QMainWindow()
window.setWindowTitle("RGB Color Mixer")
window.setGeometry(100, 100, 400, 300)

# Red slider
red_slider = QSlider(Qt.Orientation.Horizontal, window)
red_slider.setGeometry(50, 50, 300, 30)
red_slider.setRange(0, 255)
red_slider.valueChanged.connect(update_color)

# Green slider
green_slider = QSlider(Qt.Orientation.Horizontal, window)
green_slider.setGeometry(50, 100, 300, 30)
green_slider.setRange(0, 255)
green_slider.valueChanged.connect(update_color)

# Blue slider
blue_slider = QSlider(Qt.Orientation.Horizontal, window)
blue_slider.setGeometry(50, 

150, 300, 30)
blue_slider.setRange(0, 255)
blue_slider.valueChanged.connect(update_color)

# Color display
color_display = QLabel("", window)
color_display.setGeometry(50, 200, 300, 50)
color_display.setStyleSheet("background-color: black;")

# RGB label
color_label = QLabel("rgb(0, 0, 0)", window)
color_label.setGeometry(150, 260, 150, 30)

window.show()
app.exec()

Output:

• A color mixer with sliders for red, green, and blue channels that updates the background color dynamically.

Summary

In this tutorial, we covered:

1. Basics of QSlider: Creating horizontal and vertical sliders.
2. Configuring Properties: Setting range, orientation, tick marks, and steps.
3. Signals: Handling value changes with valueChanged.
4. Styling: Customizing appearance with CSS.
5. Practical Examples: Volume control, brightness adjustment, and RGB color mixer.

The QSlider widget is versatile and essential for creating user-friendly, interactive GUIs in PyQt6. Mastering it will enhance your application design.