带百分比显示的滑块控件

项目中需要一个这样的控件，它有一个滑动块，然后可以显示当前的百分比
这样的控件实际上就是一个slider和一个progressbar的组合体，在实际实现的时候需要注意几个小地方就可以了。看了quick关于slider的实现，它里面重新设置位置的时候会重新加载背景图。
以下是效果图
这是几种状态下的控件状态
这个控件的实际作用也非常的显示，用户可以操作音效的时候有用，这与纯slider的区别在于多了个进度条，因此总休进度也可以显示出来，而不只是滑块的移动。
实现这个控件需要3个控件
1 背景 图中橙色的部分是背景 5.png
2 进度条，图中绿色的部分是进度条 2.png
3 滑块控件，图中带按钮(3.png)的部分即滑块控件（其实还有个底(5.png)是被隐藏的）

lua实现代码以及注释

function MainScene:createSliderProgress()
    -- 底
    cc.ui.UIImage.new("5.png")
    :addTo(self)
    :align(display.CENTER_BOTTOM, 95, 100)
    -- 进度条
    local spr = cc.ui.UIImage.new("2.png")
    self.addprogress = CCProgressTimer:create(spr)
    self:addChild(self.addprogress)
    self.addprogress:setType(kCCProgressTimerTypeBar)
    self.addprogress:align(display.CENTER_BOTTOM, 95, 100)
    self.addprogress:setBarChangeRate(ccp(0, 1))  -- 控件是上下类型
    self.addprogress:setPercentage(0)
    self.addprogress:setMidpoint(ccp(0, 0))

    -- 增加一个滑块,由于遮挡关系，滑块控件的底必须被隐藏起来，否则看不到进度条
    local options = {scale9 = false, min = 0, max = 100}
    local image = {bar    = "5.png", button = "3.png",}

    local direction = display.BOTTOM_TO_TOP
    self.slider = cc.ui.UISlider.new(direction, image, options)
    self.slider:addTo(self)
    self.slider:align(display.CENTER_BOTTOM, 95, 100) -- 这里一定用CENTER_XX
    self.slider:onSliderValueChanged(function(event)
           self.slider.barSprite_:setVisible(false)   -- 隐藏滑块控件的底
            self.addprogress:setPercentage(event.value)
        end)
    self.slider:onSliderRelease(function (event)
        self.slider.barSprite_:setVisible(false)
    end)
    self.slider:onSliderPressed(function (event)
        self.slider.barSprite_:setVisible(false)
    end)
    self.slider.barSprite_:setVisible(false)
    self.slider:setSliderValue(self.addprogress:getPercentage())
    self.slider:setSliderButtonRotation(90)
end