How can i create a vertical direction slider?

cocos2d-x C++
#1

i find the slider ui control can only support horizon slide , i need a vertical direction slide , is any one know ?

#2

I use cocos2d-x-3.15.1
I made modifications to cocos library.
Now I create the Slide with vertical pictures of the background and the bar, then I call mySlide->setVerticalSlider().

I made following modifications:

in ~/cocos2d/cocos/ui/UISlider.h

added in the public: section

void setVerticalSlider();

and in the protected: section

bool _isVerticalSlider;

in ~/cocos2d/cocos/ui/UISlider.cpp

added in the constructor Slider::Slider():

_isVerticalSlider(false),

added following function

void Slider::setVerticalSlider()
{
    _isVerticalSlider = true;
}

changed following line in void Slider::initRenderer()

_progressBarRenderer->setAnchorPoint(Vec2(0.0f, 0.5f));

for

if( _isVerticalSlider )
    _progressBarRenderer->setAnchorPoint(Vec2(0.0f, 0.5f));
else
    _progressBarRenderer->setAnchorPoint(Vec2(0.5f, 0.0f));

changed following line in void Slider::setupProgressBarTexture()

_progressBarRenderer->setAnchorPoint(Vec2(0.0f, 0.5f));

for

if( _isVerticalSlider )
    _progressBarRenderer->setAnchorPoint(Vec2(0.5f, 0.0f));
else
    _progressBarRenderer->setAnchorPoint(Vec2(0.0f, 0.5f));

change following block of code in void Slider::setPercent(int percent)

_slidBallRenderer->setPosition(dis, _contentSize.height / 2.0f);
if (_scale9Enabled)
{
    _progressBarRenderer->setPreferredSize(Size(dis,_contentSize.height));
}
else
{
    Rect rect = _progressBarRenderer->getTextureRect();
    rect.size.width = _progressBarTextureSize.width * res;
    _progressBarRenderer->setTextureRect(rect, _progressBarRenderer->isTextureRectRotated(), rect.size);
}

for

if( _isVerticalSlider )
    _slidBallRenderer->setPosition( _contentSize.width / 2.0f, dis );
else
    _slidBallRenderer->setPosition(dis, _contentSize.height / 2.0f);
if (_scale9Enabled)
{
    if( _isVerticalSlider )
        _progressBarRenderer->setPreferredSize(Size(dis,_contentSize.height));
    else
        _progressBarRenderer->setPreferredSize(Size(_contentSize.width,dis));
}
else
{
    Rect rect = _progressBarRenderer->getTextureRect();
    if( _isVerticalSlider )
        rect.size.height = _progressBarTextureSize.height * res;
    else
        rect.size.width = _progressBarTextureSize.width * res;
    _progressBarRenderer->setTextureRect(rect, _progressBarRenderer->isTextureRectRotated(), rect.size);
}

changed following line in float Slider::getPercentWithBallPos(const Vec2 &pt) const

return ((p.x/_barLength) * static_cast<float>(_maxPercent));

for

if( _isVerticalSlider )
    return ((p.y/_barLength) * static_cast<float>(_maxPercent));
else
    return ((p.x/_barLength) * static_cast<float>(_maxPercent));

changed >>> 3 times <<< following line in void Slider::barRendererScaleChangedWithSize()

    _barLength = _contentSize.width;

for

    if( _isVerticalSlider )
        _barLength = _contentSize.height;
    else
        _barLength = _contentSize.width;

changed following line in void Slider::progressBarRendererScaleChangedWithSize()

_progressBarRenderer->setPosition(0.0f, _contentSize.height / 2.0f);

for

if( _isVerticalSlider )
    _progressBarRenderer->setPosition(_contentSize.width / 2.0f, 0.0f);
else
    _progressBarRenderer->setPosition(0.0f, _contentSize.height / 2.0f);
#3

Create a horizontal slider, and then rotate it by 270 degrees. No cocos code modifications required.