PyQt5 QSpinBox - Geekscoders

PyQt5 Tutorials

About Lesson

In this PyQt5 lesson we want to learn about PyQt5 QSpinBox, so QSpinBox is designed to handle integers and discrete sets of values (e.g., month names), use QDoubleSpinBox for floating point values. QSpinBox allows the user to choose a value by clicking the up/down buttons or pressing up/down on the keyboard to increase/decrease the value currently displayed.

These are the imports that we need, you can use QSpinBox class for creating of the spinbox in pyqt.

from PyQt5.QtWidgets import QApplication, QDialog, QHBoxLayout, 
QSpinBox, QLabel, QLineEdit
import sys
from PyQt5.QtGui import QIcon

from PyQt5.QtWidgets import QApplication, QDialog, QHBoxLayout,

QSpinBox, QLabel, QLineEdit

import sys

from PyQt5.QtGui import QIcon

You can use this code for setting the x,y position, width and height of the window.

 self.setGeometry(200,200,400,300)

1	self.setGeometry(200,200,400,300)

This is the title for our window.

 self.setWindowTitle("PyQt5 SpinBox")

1	self.setWindowTitle("PyQt5 SpinBox")

If you want to set an icon for the window, than you can use this code, make sure that you have already added an icon in your working directory.

self.setWindowIcon(QIcon("python.png"))

1	self.setWindowIcon(QIcon("python.png"))

In this application we need two QLineEdit, one QLabel and one QSpinBox, also an hbox layout for aligning horizontally our widgets.

hbox = QHBoxLayout()
label = QLabel("Laptop Price : ") 
self.lineEdit = QLineEdit()
self.spinbox = QSpinBox()
self.totalResult = QLineEdit()

hbox = QHBoxLayout()

label = QLabel("Laptop Price : ")

self.lineEdit = QLineEdit()

self.spinbox = QSpinBox()

self.totalResult = QLineEdit()

We have connected the valueChanged() signal of spinbox with spin_selected() method that we are going to create.

 self.spinbox.valueChanged.connect(self.spin_selected)

1	self.spinbox.valueChanged.connect(self.spin_selected)

You need to add all your widgets in the hbox layout.

hbox.addWidget(label)
hbox.addWidget(self.lineEdit)
hbox.addWidget(self.spinbox)
hbox.addWidget(self.totalResult)

hbox.addWidget(label)

hbox.addWidget(self.lineEdit)

hbox.addWidget(self.spinbox)

hbox.addWidget(self.totalResult)

At the end set the hbox layout for your main window, if you don’t do this you will not see any widgets in the window.

self.setLayout(hbox)

1	self.setLayout(hbox)

And this is the method that we have already connected with the valueChanged() signal of QSpinBox.

def spin_selected(self):
        if self.lineEdit.text() != 0:
            price = int(self.lineEdit.text())
            totalPrice = self.spinbox.value() * price

            self.totalResult.setText(str(totalPrice))


        else:
            print("Wrong value")

def spin_selected(self):

if self.lineEdit.text() != 0:

price = int(self.lineEdit.text())

totalPrice = self.spinbox.value() * price

self.totalResult.setText(str(totalPrice))

else:

print("Wrong value")

This is the code for PyQt5 QSpinBox

from PyQt5.QtWidgets import QApplication, QDialog, 
QHBoxLayout, QSpinBox, QLabel, QLineEdit
import sys
from PyQt5.QtGui import QIcon

class Window(QDialog):
    def __init__(self):
        super().__init__()


        #our window requirements like icon,title
        self.setGeometry(200,200,400,300)
        self.setWindowTitle("PyQt5 SpinBox")
        self.setWindowIcon(QIcon("python.png"))

        self.create_spinbox()


    def create_spinbox(self):

        #cretae hboxlayout
        hbox = QHBoxLayout()

        #in here we have created our label
        label = QLabel("Laptop Price : ")

        #this is our linedit
        self.lineEdit = QLineEdit()

        #we need to create the object of QSpinBox class
        self.spinbox = QSpinBox()

        #we have connected valueChanged signal
        self.spinbox.valueChanged.connect(self.spin_selected)
        self.totalResult = QLineEdit()


        #add widgets to your hbox layout
        hbox.addWidget(label)
        hbox.addWidget(self.lineEdit)
        hbox.addWidget(self.spinbox)
        hbox.addWidget(self.totalResult)


        self.setLayout(hbox)


    def spin_selected(self):
        if self.lineEdit.text() != 0:
            price = int(self.lineEdit.text())
            totalPrice = self.spinbox.value() * price

            self.totalResult.setText(str(totalPrice))


        else:
            print("Wrong value")


App = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(App.exec())

from PyQt5.QtWidgets import QApplication, QDialog,

QHBoxLayout, QSpinBox, QLabel, QLineEdit

import sys

from PyQt5.QtGui import QIcon

class Window(QDialog):

def __init__(self):

super().__init__()

#our window requirements like icon,title

self.setGeometry(200,200,400,300)

self.setWindowTitle("PyQt5 SpinBox")

self.setWindowIcon(QIcon("python.png"))

self.create_spinbox()

def create_spinbox(self):

#cretae hboxlayout

hbox = QHBoxLayout()

#in here we have created our label

label = QLabel("Laptop Price : ")

#this is our linedit

self.lineEdit = QLineEdit()

#we need to create the object of QSpinBox class

self.spinbox = QSpinBox()

#we have connected valueChanged signal

self.spinbox.valueChanged.connect(self.spin_selected)

self.totalResult = QLineEdit()

#add widgets to your hbox layout

hbox.addWidget(label)

hbox.addWidget(self.lineEdit)

hbox.addWidget(self.spinbox)

hbox.addWidget(self.totalResult)

self.setLayout(hbox)

def spin_selected(self):

if self.lineEdit.text() != 0:

price = int(self.lineEdit.text())

totalPrice = self.spinbox.value() * price

self.totalResult.setText(str(totalPrice))

else:

print("Wrong value")

App = QApplication(sys.argv)

window = Window()

window.show()

sys.exit(App.exec())

Run the complete code and this will be the result

PyQt5 SpinBox - Working with QSpinBox in PyQt — PyQt5 SpinBox – Working with QSpinBox in PyQt

Creating QDoubleSpinBox with Qt Designer

OK now we want to create QDoubleSpinBox widget using Qt Designer, open your Qt Designer, you can just write pyqt5designer in your terminal, after opening the Qt Designer you need to create Dialog without Buttons window. now we add widgets in Qt Designer.

First add an HBoxLayout
Now you need to add four widgets in the HBoxLayout, QLabel,QLineEdit,QDoubleSpinBox and QLineEdit

After completing of the design, save the ui file, iam going to name it doublespin.ui. now copy the file and paste the file in your working directory, this time we are not going to convert the ui file in to python, but we directly load the ui file using uic module.

Create a new python file iam going to call it LoadDoubleSpinBox.py. and add this code.

from PyQt5.QtWidgets import QApplication, QDialog, QLineEdit,\
    QDoubleSpinBox
from PyQt5 import uic

class UI(QDialog):
    def __init__(self):
        super().__init__()

        #loading the ui file with uic module 
        uic.loadUi("doublespin.ui", self)

        #finding child in the ui file

        self.linePrice = self.findChild(QLineEdit, "lineEditPrice")
        self.doublespin = self.findChild(QDoubleSpinBox, "doubleSpinBox")
        self.doublespin.valueChanged.connect(self.spin_selected)
        
        self.lineResult = self.findChild(QLineEdit, "lineEditTotal")



    def spin_selected(self):
        if self.linePrice.text() != 0:
            price = int(self.linePrice.text())
            totalPrice = self.doublespin.value() * price

            self.lineResult.setText(str(totalPrice))



app = QApplication([])
window = UI()
window.show()
app.exec_()

from PyQt5.QtWidgets import QApplication, QDialog, QLineEdit,\

QDoubleSpinBox

from PyQt5 import uic

class UI(QDialog):

def __init__(self):

super().__init__()

#loading the ui file with uic module

uic.loadUi("doublespin.ui", self)

#finding child in the ui file

self.linePrice = self.findChild(QLineEdit, "lineEditPrice")

self.doublespin = self.findChild(QDoubleSpinBox, "doubleSpinBox")

self.doublespin.valueChanged.connect(self.spin_selected)

self.lineResult = self.findChild(QLineEdit, "lineEditTotal")

def spin_selected(self):

if self.linePrice.text() != 0:

price = int(self.linePrice.text())

totalPrice = self.doublespin.value() * price

self.lineResult.setText(str(totalPrice))

app = QApplication([])

window = UI()

window.show()

app.exec_()

Also we need to find the child in our ui file using findChild() method, because we want to connect valueChanged() signal of the spinbox with spin_selected() method.

This is the method, basically in this method we get the value from the QLineEdit with text() method, also the spinbox value with the value() method.

    def spin_selected(self):
        if self.linePrice.text() != 0:
            price = int(self.linePrice.text())
            totalPrice = self.doublespin.value() * price

            self.lineResult.setText(str(totalPrice))

def spin_selected(self):

if self.linePrice.text() != 0:

price = int(self.linePrice.text())

totalPrice = self.doublespin.value() * price

self.lineResult.setText(str(totalPrice))

Run the code and this is the result.