Wip style QSlider

This commit is contained in:
2026-03-04 12:46:56 +01:00
parent cf33a6613c
commit 7f5e7710e5
5 changed files with 345 additions and 2 deletions

Binary file not shown.

View File

@@ -3,9 +3,11 @@ import os
from PyQt6 import QtGui, QtWidgets from PyQt6 import QtGui, QtWidgets
from PyQt6 import uic from PyQt6 import uic
from PyQt6.QtCore import Qt from PyQt6.QtCore import Qt
from PyQt6.QtGui import QFontDatabase, QFont from PyQt6.QtGui import QFontDatabase, QFont, QColor
from PyQt6.QtWidgets import QApplication, QMainWindow from PyQt6.QtWidgets import QApplication, QMainWindow
from slidergroovecolorstyle import ThinSubPageLineStyle, ThinAddPageLineStyle
# Compile resources.qrc into resources_rc.py # Compile resources.qrc into resources_rc.py
# rcc -g python resources.qrc -o resources_rc.py # rcc -g python resources.qrc -o resources_rc.py
@@ -52,6 +54,7 @@ class MainWindow(QMainWindow):
# Adjust UI # Adjust UI
self.maintitle_label.setFont(QFont(font_family, 38)) self.maintitle_label.setFont(QFont(font_family, 38))
self.subtitle_label.setStyleSheet("color: rgb(163, 177, 198)") self.subtitle_label.setStyleSheet("color: rgb(163, 177, 198)")
#self.horizontalSlider.setStyle(ThinAddPageLineStyle(app.style(), QColor("#2196F3")))
if NO_STAFF : if NO_STAFF :
self.staff_btn.hide() self.staff_btn.hide()

View File

@@ -448,14 +448,20 @@
<item> <item>
<widget class="QSlider" name="horizontalSlider"> <widget class="QSlider" name="horizontalSlider">
<property name="autoFillBackground"> <property name="autoFillBackground">
<bool>true</bool> <bool>false</bool>
</property> </property>
<property name="styleSheet"> <property name="styleSheet">
<string notr="true"/> <string notr="true"/>
</property> </property>
<property name="value">
<number>20</number>
</property>
<property name="orientation"> <property name="orientation">
<enum>Qt::Orientation::Horizontal</enum> <enum>Qt::Orientation::Horizontal</enum>
</property> </property>
<property name="invertedAppearance">
<bool>false</bool>
</property>
</widget> </widget>
</item> </item>
<item> <item>

272
slidergroovecolorstyle.py Normal file
View File

@@ -0,0 +1,272 @@
from PyQt6.QtCore import Qt
from PyQt6.QtWidgets import (
QSlider, QProxyStyle, QStyle
)
from PyQt6.QtGui import QColor
class SliderGrooveColorStyle(QProxyStyle):
def __init__(self, base_style=None, groove_color=QColor("lightblue")):
super().__init__(base_style)
self.groove_color = groove_color
def drawComplexControl(self, control, option, painter, widget=None):
if control == QStyle.ComplexControl.CC_Slider and isinstance(widget, QSlider):
# Récupérer la zone du groove
groove_rect = self.subControlRect(
QStyle.ComplexControl.CC_Slider,
option,
QStyle.SubControl.SC_SliderGroove,
widget
)
# Dessiner notre fond
painter.save()
painter.setBrush(self.groove_color)
painter.setPen(Qt.PenStyle.NoPen)
painter.drawRect(groove_rect)
painter.restore()
# Puis laisser Qt dessiner normalement (handle etc.)
super().drawComplexControl(control, option, painter, widget)
return
super().drawComplexControl(control, option, painter, widget)
class SliderSubPageColorStyle(QProxyStyle):
def __init__(self, base_style=None, color=QColor("#4CAF50")):
super().__init__(base_style)
self.color = color
def drawComplexControl(self, control, option, painter, widget=None):
if control == QStyle.ComplexControl.CC_Slider and isinstance(widget, QSlider):
# Laisser Qt dessiner le slider normalement
super().drawComplexControl(control, option, painter, widget)
# Récupérer les rectangles du groove et du handle
groove_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderGroove,
widget
)
handle_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderHandle,
widget
)
painter.save()
painter.setBrush(self.color)
painter.setPen(Qt.PenStyle.NoPen)
if widget.orientation() == Qt.Orientation.Horizontal:
# Partie avant le handle (gauche → centre du handle)
sub_rect = groove_rect.adjusted(
0,
0,
handle_rect.center().x() - groove_rect.right(),
0
)
else:
# Vertical (bas → centre du handle)
sub_rect = groove_rect.adjusted(
0,
handle_rect.center().y() - groove_rect.bottom(),
0,
0
)
painter.drawRect(sub_rect)
painter.restore()
return
super().drawComplexControl(control, option, painter, widget)
class SliderAddPageColorStyle(QProxyStyle):
def __init__(self, base_style=None, color=QColor("#FF9800")):
super().__init__(base_style)
self.color = color
def drawComplexControl(self, control, option, painter, widget=None):
if control == QStyle.ComplexControl.CC_Slider and isinstance(widget, QSlider):
# Récupérer groove + handle
groove_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderGroove,
widget
)
handle_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderHandle,
widget
)
painter.save()
painter.setBrush(self.color)
painter.setPen(Qt.PenStyle.NoPen)
if widget.orientation() == Qt.Orientation.Horizontal:
# Partie après le handle (centre → fin)
add_rect = groove_rect.adjusted(
handle_rect.center().x() - groove_rect.left(),
0,
0,
0
)
else:
# Vertical (centre → haut)
add_rect = groove_rect.adjusted(
0,
0,
0,
handle_rect.center().y() - groove_rect.top()
)
painter.drawRect(add_rect)
painter.restore()
# IMPORTANT : Qt dessine ensuite le handle par-dessus
super().drawComplexControl(control, option, painter, widget)
return
super().drawComplexControl(control, option, painter, widget)
class ThinAddPageLineStyle(QProxyStyle):
def __init__(self, base_style=None, color=QColor("#E91E63")):
super().__init__(base_style)
self.color = color
def drawComplexControl(self, control, option, painter, widget=None):
if control == QStyle.ComplexControl.CC_Slider and isinstance(widget, QSlider):
groove_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderGroove,
widget
)
handle_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderHandle,
widget
)
painter.save()
painter.setBrush(self.color)
painter.setPen(Qt.PenStyle.NoPen)
if widget.orientation() == Qt.Orientation.Horizontal:
# Épaisseur fine (2 px)
thickness = 2
y = groove_rect.center().y() - thickness // 2
add_rect = groove_rect.adjusted(
handle_rect.center().x() - groove_rect.left(),
0,
0,
0
)
add_rect.setTop(y)
add_rect.setHeight(thickness)
else:
thickness = 2
x = groove_rect.center().x() - thickness // 2
add_rect = groove_rect.adjusted(
0,
0,
0,
handle_rect.center().y() - groove_rect.top()
)
add_rect.setLeft(x)
add_rect.setWidth(thickness)
painter.drawRect(add_rect)
painter.restore()
# Dessiner ensuite le slider normalement (handle au-dessus)
super().drawComplexControl(control, option, painter, widget)
return
super().drawComplexControl(control, option, painter, widget)
class ThinSubPageLineStyle(QProxyStyle):
def __init__(self, base_style=None, color=QColor("#4CAF50")):
super().__init__(base_style)
self.color = color
def drawComplexControl(self, control, option, painter, widget=None):
if control == QStyle.ComplexControl.CC_Slider and isinstance(widget, QSlider):
groove_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderGroove,
widget
)
handle_rect = self.subControlRect(
control,
option,
QStyle.SubControl.SC_SliderHandle,
widget
)
painter.save()
painter.setBrush(self.color)
painter.setPen(Qt.PenStyle.NoPen)
# Épaisseur fine (ajuste si besoin)
thickness = 2
if widget.orientation() == Qt.Orientation.Horizontal:
y = groove_rect.center().y() - thickness // 2
sub_rect = groove_rect.adjusted(
0,
0,
handle_rect.center().x() - groove_rect.right(),
0
)
sub_rect.setTop(y)
sub_rect.setHeight(thickness)
else:
x = groove_rect.center().x() - thickness // 2
sub_rect = groove_rect.adjusted(
0,
handle_rect.center().y() - groove_rect.bottom(),
0,
0
)
sub_rect.setLeft(x)
sub_rect.setWidth(thickness)
painter.drawRect(sub_rect)
painter.restore()
# Qt redessine le slider (handle au-dessus)
super().drawComplexControl(control, option, painter, widget)
return
super().drawComplexControl(control, option, painter, widget)

View File

@@ -34,3 +34,65 @@ QTextEdit#info_text {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
/*
QSlider::groove:horizontal {
border: 1px solid #262626;
height: 10px;
}
QSlider::handle:horizontal {
background: rgb(236, 127, 43);
border: 1px solid rgb(236, 127, 43);
width: 23px;
border-radius: 3px;
height: 100px;
margin: -24px -12px;
}
QSlider::sub-page:horizontal{
border:0px;
border-radius:6px;
background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #12b9ff, stop: 1.0 #015eea);
}
QSlider::add-page:horizontal{
border:0px;
border-radius:6px;
background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(146, 149, 150), stop: 1.0 rgb(253, 254, 254));
}
*/
QSlider::groove:horizontal {
border: 1px inset #1C1C1C;
height: 6px;
border-radius: 3px;
}
QSlider::groove:horizontal {
border: 1px inset #1C1C1C;
height: 6px;
border-radius: 3px;
}
QSlider::sub-page:horizontal {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #12b9ff, stop: 1.0 #015eea);
border: 1px inset #1C1C1C;
border-radius: 3px;
}
/* groove background on right of slider */
QSlider::add-page:horizontal {
background: #7D7D7D;
border: 1px outset #1C1C1C;
border-radius: 3px;
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 rgb(241, 160, 61), stop:1 rgb(233, 111, 29));
border: 1px solid rgb(213, 125, 2);
width: 12px;
height: 10px;
margin-top: -8px;
margin-bottom: -8px;
border-radius: 2px;
}