Working with sliders is a common feature in many desktop applications, in scenarios where you want to adjust volume, set brightness, or choose a value within a range.
In PyQt6, the QSlider widget makes this super easy. It gives users a clear and interactive way to select a value by sliding a handle along a track, either horizontally or vertically.
In this tutorial, I will walk you through how to use the QSlider widget in PyQt6. You will learn how to create sliders, customize their appearance, practical applications and advanced QSlider techniques in PyQt6.
If you have not installed PyQt6 in your system, this blog will guide you on “How to Install PyQt6 on Different Platforms?“.
QSlider in PyQt6
The QSlider widget in PyQt6 provides a slider control that allows users to select a value from a continuous range by moving a handle along a track. This control is perfect for adjusting settings like volume, brightness, or any numerical value where visual feedback is beneficial.
Key Features of QSlider
- Horizontal or vertical orientation
- Customizable range and step values
- Tick marks for visual guidance
- Real-time value updates through signals
Read QComboBox Widget in PyQt6
Create Your First QSlider
Let’s start with a basic implementation of a horizontal slider:
import sys
from PyQt6.QtWidgets import QApplication, QWidget, QSlider
from PyQt6.QtCore import Qt
app = QApplication(sys.argv)
# Create a simple window
window = QWidget()
window.setWindowTitle("Basic QSlider")
window.setGeometry(100, 100, 300, 100)
# Create a horizontal slider
slider = QSlider(Qt.Orientation.Horizontal, window)
slider.setGeometry(50, 40, 200, 20)
# Show the window
window.show()
sys.exit(app.exec())I executed the above example code and added the screenshot below.
Creates a basic window and adds a horizontal slider in a fixed position.
Check out Create a Random Number Generator with QLCDNumber in PyQt6
Work with QSlider Signals
The QSlider widget provides several signals that you can connect to handler functions. The most commonly used are:
valueChanged: Emitted when the slider value changessliderPressed: Emitted when the user starts dragging the slidersliderReleased: Emitted when the user releases the slidersliderMoved: Emitted when the slider is dragged
Here’s an example showcasing these signals:
import sys
from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSlider
from PyQt6.QtCore import Qt
class SliderSignalsDemo(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("QSlider Signal Demo")
self.setGeometry(100, 100, 300, 150)
# Create layout
layout = QVBoxLayout()
# Create a label to display the slider value
self.value_label = QLabel("Value: 0")
layout.addWidget(self.value_label)
# Create a slider
self.slider = QSlider(Qt.Orientation.Horizontal)
self.slider.setMinimum(0)
self.slider.setMaximum(100)
layout.addWidget(self.slider)
# Connect slider signals to handler methods
self.slider.valueChanged.connect(self.value_changed)
self.slider.sliderPressed.connect(self.slider_pressed)
self.slider.sliderReleased.connect(self.slider_released)
self.slider.sliderMoved.connect(self.slider_moved)
self.setLayout(layout)
def value_changed(self):
self.value_label.setText(f"Value: {self.slider.value()}")
def slider_pressed(self):
print("Slider pressed")
def slider_released(self):
print("Slider released")
def slider_moved(self, position):
print(f"Slider moved to: {position}")
app = QApplication(sys.argv)
demo = SliderSignalsDemo()
demo.show()
sys.exit(app.exec())I executed the above example code and added the screenshot below.
Displays a horizontal slider, updates a label with the current slider value, and prints messages in the console when the user presses, moves, or releases the slider.
Read Build a Simple Digital Clock with QLCDNumber in PyQt6
Customize QSlider Appearance and Behavior
Let me show you how the customize the appearance and behavior of the Slider.
Set Tick Marks
Tick marks are small lines shown below (or beside) the slider. They help users understand the slider’s scale.
You can add tick marks using:
self.slider.setTickPosition(QSlider.TickPosition.TicksBelow)
self.slider.setTickInterval(10) # Show a tick every 10 unitsControl Step Size
By default, using the arrow keys moves the slider one unit at a time.
You can control this using:
self.slider.setSingleStep(5) # Move in steps of 5 with arrow keysVertical Slider Implementation
You can create a vertical slider simply by setting its orientation:
self.vertical_slider = QSlider(Qt.Orientation.Vertical)It works just like the horizontal one, just displayed vertically.
Check out QSpinBox Widget in PyQt6
Putting it All Together
This PyQt6 app contains a horizontal slider with tick marks and step size, and a vertical slider as well:
import sys
from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QLabel, QSlider
from PyQt6.QtCore import Qt
class SliderFeaturesDemo(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("QSlider Features Demo")
self.setGeometry(100, 100, 400, 250)
main_layout = QVBoxLayout()
# Label for horizontal slider
self.h_label = QLabel("Horizontal Value: 0")
main_layout.addWidget(self.h_label)
# Horizontal slider with ticks and step size
self.slider = QSlider(Qt.Orientation.Horizontal)
self.slider.setMinimum(0)
self.slider.setMaximum(100)
self.slider.setValue(0)
self.slider.setTickPosition(QSlider.TickPosition.TicksBelow)
self.slider.setTickInterval(10)
self.slider.setSingleStep(5)
self.slider.valueChanged.connect(self.update_horizontal_label)
main_layout.addWidget(self.slider)
# Horizontal layout to hold vertical slider and label
vertical_layout = QHBoxLayout()
# Vertical slider
self.vertical_slider = QSlider(Qt.Orientation.Vertical)
self.vertical_slider.setMinimum(0)
self.vertical_slider.setMaximum(100)
self.vertical_slider.setValue(50)
self.vertical_slider.setTickPosition(QSlider.TickPosition.TicksRight)
self.vertical_slider.setTickInterval(10)
self.vertical_slider.setSingleStep(10)
self.vertical_slider.valueChanged.connect(self.update_vertical_label)
vertical_layout.addWidget(self.vertical_slider)
# Label for vertical slider
self.v_label = QLabel("Vertical Value: 50")
vertical_layout.addWidget(self.v_label)
main_layout.addLayout(vertical_layout)
self.setLayout(main_layout)
def update_horizontal_label(self):
value = self.slider.value()
self.h_label.setText(f"Horizontal Value: {value}")
def update_vertical_label(self):
value = self.vertical_slider.value()
self.v_label.setText(f"Vertical Value: {value}")
# Run the app
app = QApplication(sys.argv)
demo = SliderFeaturesDemo()
demo.show()
sys.exit(app.exec())I executed the above example code and added the screenshot below.
Read QCheckBox Widget in PyQt6
Practical QSlider Applications in PyQt6
Let me explain to you some practical applications of QSLder in PyQt6:
Build a Volume Control
If you’re creating a media player or any app with sound control, adding a volume slider can make your UI more interactive and intuitive.
class VolumeControl(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("Volume Control")
self.setGeometry(100, 100, 300, 100)
layout = QVBoxLayout()
self.setLayout(layout)
# Create volume label
self.volume_label = QLabel("Volume: 50%")
layout.addWidget(self.volume_label)
# Create volume slider
self.volume_slider = QSlider(Qt.Orientation.Horizontal)
self.volume_slider.setMinimum(0)
self.volume_slider.setMaximum(100)
self.volume_slider.setValue(50)
self.volume_slider.setTickPosition(QSlider.TickPosition.TicksBelow)
self.volume_slider.setTickInterval(10)
self.volume_slider.valueChanged.connect(self.update_volume)
layout.addWidget(self.volume_slider)
def update_volume(self):
volume = self.volume_slider.value()
self.volume_label.setText(f"Volume: {volume}%")
# Here you would typically call a function to actually change the volume
# For example: set_system_volume(volume)Using just a few lines of code, you now have a fully functional volume control slider. It’s easy to integrate, visually helpful, and a great building block for more advanced audio features in your PyQt6 applications.
Create a Color Mixer
In this tutorial, we’ll create a simple and interactive RGB color mixer using PyQt6’s QSlider. By adjusting three sliders for red, green, and blue, you can dynamically mix colors and see the result in real time.
class ColorMixer(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("RGB Color Mixer")
self.setGeometry(100, 100, 400, 300)
layout = QVBoxLayout()
self.setLayout(layout)
# Create color preview
self.color_preview = QLabel()
self.color_preview.setFixedSize(200, 100)
self.color_preview.setStyleSheet("background-color: rgb(0, 0, 0); border: 1px solid black;")
layout.addWidget(self.color_preview)
# RGB values label
self.rgb_label = QLabel("RGB: (0, 0, 0)")
layout.addWidget(self.rgb_label)
# Red slider
red_layout = QVBoxLayout()
red_layout.addWidget(QLabel("Red:"))
self.red_slider = QSlider(Qt.Orientation.Horizontal)
self.red_slider.setRange(0, 255)
self.red_slider.valueChanged.connect(self.update_color)
red_layout.addWidget(self.red_slider)
layout.addLayout(red_layout)
# Green slider
green_layout = QVBoxLayout()
green_layout.addWidget(QLabel("Green:"))
self.green_slider = QSlider(Qt.Orientation.Horizontal)
self.green_slider.setRange(0, 255)
self.green_slider.valueChanged.connect(self.update_color)
green_layout.addWidget(self.green_slider)
layout.addLayout(green_layout)
# Blue slider
blue_layout = QVBoxLayout()
blue_layout.addWidget(QLabel("Blue:"))
self.blue_slider = QSlider(Qt.Orientation.Horizontal)
self.blue_slider.setRange(0, 255)
self.blue_slider.valueChanged.connect(self.update_color)
blue_layout.addWidget(self.blue_slider)
layout.addLayout(blue_layout)
def update_color(self):
r = self.red_slider.value()
g = self.green_slider.value()
b = self.blue_slider.value()
self.color_preview.setStyleSheet(f"background-color: rgb({r}, {g}, {b}); border: 1px solid black;")
self.rgb_label.setText(f"RGB: ({r}, {g}, {b})")With this simple RGB color mixer, you’ve learned how to use sliders to control dynamic changes in your UI.
Check out QRadioButton Widget in PyQt6
Advanced QSlider Technique in PyQt6
Let me explain to you the advanced technique of QSlider in PyQt6
Custom Styling with QSS
In this advanced tip, we’ll apply a custom gradient, borders, and rounded corners to both the track and the handle of a QSlider, giving it a polished, modern look.
# Apply custom styling to the slider
self.slider.setStyleSheet("""
QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px;
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0;
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0;
border-radius: 3px;
}
""")By changing just a few style rules, you can transform the default slider into a unique UI element that fits with your application’s design.
You may like to read some related articles:
- Handle Button Click Events Using Signals and Slots in PyQt6
- Arrange Widgets Using QGridLayout in PyQt6
- QVBoxLayout in PyQt6 for Vertical Layouts
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
