ZetCode

PyQt QSlider

last modified July 9, 2020

PyQt QSlider tutorial shows how to work with QSlider widget.

Sources are available at PyQt-Examples repository. Visit Advanced PyQt5 e-book, read PyQt5 tutorial, or list all PyQt tutorials.

PyQt QSlider

QSlider is a widget for controlling a bounded value. The slider can be horizontal or vertical. The user chooses the value by moving a handle.

The range of the possible values is specified with setMinimum, setMaximum, or setRange. Optionally, it is possible to display tickmarks.

The valueChanged signal is emitted when the slider's value has changed.

QSlider horizontal example

In the following example, we create a horizontal slider.

horizontal.py
#!/usr/bin/python


from PyQt5.QtWidgets import (QWidget, QSlider, QHBoxLayout,
                             QLabel, QApplication)
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap
import sys


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):

        hbox = QHBoxLayout()

        sld = QSlider(Qt.Horizontal, self)
        sld.setRange(0, 100)
        sld.setFocusPolicy(Qt.NoFocus)
        sld.setPageStep(5)

        sld.valueChanged.connect(self.updateLabel)

        self.label = QLabel('0', self)
        self.label.setAlignment(Qt.AlignCenter | Qt.AlignVCenter)
        self.label.setMinimumWidth(80)

        hbox.addWidget(sld)
        hbox.addSpacing(15)
        hbox.addWidget(self.label)

        self.setLayout(hbox)

        self.setGeometry(300, 300, 350, 250)
        self.setWindowTitle('QSlider')
        self.show()

    def updateLabel(self, value):

        self.label.setText(str(value))


def main():

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

Moving the slider's handle, we change the value displayed in the adjacent label.

sld = QSlider(Qt.Horizontal, self)
sld.setRange(0, 100)

A horizontal slider is created. Its range of values is set with setRange.

sld.setFocusPolicy(Qt.NoFocus)

This is a workaround to remove an ugly looking focus rectangle around the slider.

sld.setPageStep(5)

The page step is a larger step which is performed with PageUp or PageDown or by clicking on a slider outside of the handle.

sld.valueChanged.connect(self.updateLabel)

We connect the self.updateLabel handler to the valueChanged signal.

self.label = QLabel('0', self)
self.label.setAlignment(Qt.AlignCenter | Qt.AlignVCenter)
self.label.setMinimumWidth(80)

We set a minimum size for the label to prevent the slider from resizing when the label is redrawn.

def updateLabel(self, value):

    self.label.setText(str(value))

In the updateLabel handler, we update the text of the label to the newly chosen QSlider value.

Horizontal QSlider
Figure: Horizontal QSlider

Vertical QSlider

The next example displays a vertical slider.

vertical.py
#!/usr/bin/python


from PyQt5.QtWidgets import (QWidget, QSlider, QHBoxLayout,
                             QLabel, QApplication)
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap
import sys


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):

        hbox = QHBoxLayout()

        sld = QSlider(Qt.Vertical, self)
        sld.setFocusPolicy(Qt.NoFocus)

        sld.setRange(0, 100)
        sld.setPageStep(5)

        sld.valueChanged.connect(self.changeValue)

        self.label = QLabel("0", self)
        self.label.setStyleSheet('QLabel { background: #007AA5; border-radius: 3px;}')
        self.label.setAlignment(Qt.AlignCenter | Qt.AlignVCenter)
        self.label.setMinimumWidth(80)

        hbox.addStretch()
        hbox.addWidget(sld)
        hbox.addSpacing(15)
        hbox.addWidget(self.label)
        hbox.addStretch()

        self.setLayout(hbox)

        self.setGeometry(300, 300, 350, 250)
        self.setWindowTitle('QSlider')
        self.show()

    def changeValue(self, value):

        self.label.setText(str(value))

def main():

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

To create a vertical slider, we pass the Qt.Vertical to the QSlider constructor.

self.label = QLabel("0", self)
self.label.setStyleSheet('QLabel { background: #007AA5; border-radius: 3px;}')

We play with the label's stylesheet to create a nice looking rounded rectangle.

Vertical QSlider
Figure: Vertical QSlider

QSlider volume control

The following example shows how to use a slider to manage a volume control.

volume_control.py
#!/usr/bin/python


from PyQt5.QtWidgets import (QWidget, QSlider, QHBoxLayout,
                             QLabel, QApplication)
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap
import sys


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):

        hbox = QHBoxLayout()

        sld = QSlider(Qt.Horizontal, self)
        sld.setFocusPolicy(Qt.NoFocus)
        sld.valueChanged.connect(self.changeValue)

        self.label = QLabel(self)
        self.label.setPixmap(QPixmap('mute.png'))

        hbox.addWidget(sld)
        hbox.addSpacing(15)
        hbox.addWidget(self.label)

        self.setLayout(hbox)

        self.move(300, 300)
        self.setWindowTitle('Volume control')
        self.show()

    def changeValue(self, value):

        if value == 0:

            self.label.setPixmap(QPixmap('mute.png'))
        elif 0 < value <= 30:

            self.label.setPixmap(QPixmap('min.png'))
        elif 30 < value < 80:

            self.label.setPixmap(QPixmap('med.png'))
        else:

            self.label.setPixmap(QPixmap('max.png'))


def main():

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

In our example we simulate a volume control. By dragging the handle of a slider, we change an image on the label.

self.label = QLabel(self)
self.label.setPixmap(QPixmap('mute.png'))

We create a QLabel widget and set an initial mute image to it.

sld.valueChanged[int].connect(self.changeValue)

We connect the valueChanged signal to the user defined changeValue() method.

if value == 0:
    self.label.setPixmap(QPixmap('mute.png'))
...

Based on the value of the slider, we set an image to the label. In the above code, we set the mute.png image to the label if the slider is equal to zero.

QSlider volume control
Figure: QSlider volume control

In this tutorial, we have presented the PyQt QSlider widget.

List all PyQt tutorials.