Right side arrow of QScrollbar disappears when applying style sheet

Question

I am trying to apply stylesheet for QScrollbar, the right side arrow is not showing up and I am not able to change handle width and the background color of the bar.

How can I make the right arrow appear and change the width of the handle along with background color?

code:

sliderOne.setStyleSheet('''
    QScrollBar:horizontal {
        border: 1px solid none;
        height: 15px;
        margin: 0px 20px 0px 20px;
    }
    QScrollbar::handle:horizontal {
        min-width:8px;
    }
''')

Image of what I am getting:

Answer 1

I achieved my requirement using custom images; for those of you who are interested, you can check this code.

sliderOne.setStyleSheet('''
    QScrollBar:horizontal {
        border: 2px solid grey;
        background: none;
        height: 15px;
        margin: 0px 20px 0 20px;
    }
    QScrollBar::handle:horizontal {
        background: gray;
        min-width: 10px;
    }
    QScrollBar::add-line:horizontal {
        border: 2px solid grey;
        background: none;
        width: 20px;
        subcontrol-position: right;
        subcontrol-origin: margin;
    }
    QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
        background: none;
    }
    QScrollBar::right-arrow:horizontal {
        image: url(path/arrow-right-down.png);
        background: none;
    }
    QScrollBar::right-arrow:horizontal:pressed {
        image: url(path/arrow-right-up.png);
        background: none;
    }
    QScrollBar:left-arrow:horizontal {
        image: url(path/arrow-left-down.png);
        background: none;
    }
    QScrollBar:left-arrow:horizontal:pressed {
        image: url(path/arrow-left-up.png);
        background: none;
    }
    QScrollBar::sub-line:horizontal {
        border: 2px solid grey;
        background: none;
        width: 20px;
        subcontrol-position: left;
        subcontrol-origin: margin;
    }
''')