In this Python PyQt5 lesson we want to learn about Python PyQt5 QSlider , using QSlider widget you can create vertical or horizontal slider, and it lets the user move a slider handle along a horizontal or vertical groove and translates the handle’s position into an integer value within the legal range.
Now open your Qt Designer, you can just write pyqt5designer in your terminal, after opening the Qt Designer you need to create Widget window. now we add widgets in Qt Designer.
- Add a QHBoxLayout
- In the HBoxLayout add a QSlider with QLabel
Also you can right click and Change Stylesheet.
|
1 2 3 4 5 |
QWidget { background-color:rgb(85, 255, 255) } |
This is the design.
This is the ui file for the slider.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>Form</class> <widget class="QWidget" name="Form"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>473</width> <height>146</height> </rect> </property> <property name="windowTitle"> <string>Form</string> </property> <property name="styleSheet"> <string notr="true">QWidget { background-color:rgb(85, 255, 255) }</string> </property> <layout class="QHBoxLayout" name="horizontalLayout_2"> <item> <layout class="QHBoxLayout" name="horizontalLayout"> <item> <widget class="QLabel" name="label"> <property name="font"> <font> <pointsize>14</pointsize> <weight>75</weight> <bold>true</bold> </font> </property> <property name="text"> <string>TextLabel</string> </property> </widget> </item> <item> <widget class="QSlider" name="horizontalSlider"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> </widget> </item> </layout> </item> </layout> </widget> <resources/> <connections/> </ui> |
OK now we want to load our ui file, so for this copy the ui file and paste to your directory, after that create a new python file, iam going to call it LoadSlider.py and add this code, for loading the ui file we want to use uic module from pyqt5.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
from PyQt5.QtWidgets import QApplication, QWidget,\ QSlider, QLabel from PyQt5 import uic class UI(QWidget): def __init__(self): super().__init__() # loading the ui file with uic module uic.loadUi('slider.ui', self) #finding the widgets self.slider = self.findChild(QSlider, "horizontalSlider") self.slider.valueChanged.connect(self.changed_slider) self.label = self.findChild(QLabel, "label") def changed_slider(self): value = self.slider.value() self.label.setText(str(value)) app = QApplication([]) window = UI() window.show() app.exec_() |
You can see in the above code we have used loadUi() method for loading the ui file.
|
1 |
uic.loadUi('slider.ui', self) |
In our main design we have a QSlider with a QLabel, so we need to find these widgets in the ui file, as we have done in the above code, we can use findChild() method for finding the widgets in ui file.
|
1 2 |
self.slider = self.findChild(QSlider, "horizontalSlider") self.label = self.findChild(QLabel, "label") |
Also we have connected our valueChanged() signal of slider with the changed_slider() method.
|
1 |
self.slider.valueChanged.connect(self.changed_slider) |
And this is the method that we have already connected with the signal, in this method we are going to just get the text from the slider and we set the text in the label using setText() method.
|
1 2 3 |
def changed_slider(self): value = self.slider.value() self.label.setText(str(value)) |
Run the complete code and this is the result.
Creating PyQt QSlider with Coding
OK now we want to create our pyqt5 slider using coding, in the previous part we have used Qt Designer, in here we are not going to use Qt Designer. this is the complete source code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
from PyQt5.QtWidgets import QApplication, QWidget, \ QSlider, QLabel, QHBoxLayout import sys from PyQt5.QtGui import QIcon, QFont from PyQt5.QtCore import Qt class Window(QWidget): def __init__(self): super().__init__() #window requrements like geometry,icon and title self.setGeometry(200,200,400,200) self.setWindowTitle("PyQt5 Slider") self.setWindowIcon(QIcon("python.png")) hbox = QHBoxLayout() self.slider = QSlider() self.slider.setOrientation(Qt.Horizontal) self.slider.setTickPosition(QSlider.TicksBelow) self.slider.setTickInterval(10) self.slider.setMinimum(0) self.slider.setMaximum(100) self.slider.valueChanged.connect(self.changed_slider) self.label =QLabel("") self.label.setFont(QFont("Sanserif", 15)) hbox.addWidget(self.slider) hbox.addWidget(self.label) self.setLayout(hbox) def changed_slider(self): value = self.slider.value() self.label.setText(str(value)) App = QApplication(sys.argv) window = Window() window.show() sys.exit(App.exec()) |
These are our window requirements like window title, window icon, width and height of the window, x and y position of the window.
|
1 2 3 |
self.setGeometry(200,200,400,200) self.setWindowTitle("PyQt5 Slider") self.setWindowIcon(QIcon("python.png")) |
So you can use QSlider class object for creating slider in Python PyQt5.
|
1 |
self.slider = QSlider() |
And this is the method that we have already connected with the signal, in this method we are going to just get the text from the slider and we set the text in the label using setText() method.
|
1 2 3 |
def changed_slider(self): value = self.slider.value() self.label.setText(str(value)) |
Run the complete code and this is the result.
