QSlider Stylesheet

Question

I'm using QT widgets.I want to change the style of SliderBar.I can make it like this at the end of my efforts.

I did this

but I need this

I am sharing the stylesheet codes below. How can I do as shown in the second picture.

QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}

QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border-radius: 12px;
}

QSlider::add-page:horizontal {
background: #e9e9e9;
height: 10px;
border-radius: 12px;
}

QSlider::handle:horizontal {
background: transparent;
width: 22px;
margin: -10px;
border: 1px solid transparent;
border-radius: 5px;
}

Parisa.H.R · Answer 1 · 2022-07-19T15:01:13.887

I changed your stylesheet to this :

QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::handle:horizontal {
    background: #c17d08;
    border: 1px solid #c17d08;
    width: 14px;
    margin: -5px 0;
    border-radius: 6px;
}
QSlider::add-page:horizontal {
height: 10px;
background: #e9e9e9;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border: 1px solid #c17d08;
border-radius: 12px;
}

your border-radius should be proportional to the length and width to become a circle.

Result :

QSlider Stylesheet

1 Answers1