Search code examples
iosswiftxcodeuislideruiprogressview

UIslider and UI progress view embedded


I'm trying to build a slider embedded in a progress bar, so that slider's minimum image settles with the progress bar 'progress image' and the user can slide only inside the 'progress track image'. Something like image below: enter image description here

As in the image,

  • green section is a progress view
  • section right to the red (minimum slider value image) is a slider & should dynamically adjust to the 'progress image' and should hide the 'progress track'

I hav tried to set the

minimumvalueimage

of slider programatically as below:

override func trackRectForBounds(bounds: CGRect) -> CGRect {
    //        keeps original origin and width, changes height, you get the idea
    let customBounds = CGRectMake(7, 0, 180, 15)
    super.trackRectForBounds(customBounds)
    return customBounds
}

Is this a correct way to do this task, please suggest me something. I'm stuck here, and not in the right track.. if I'm not clear about anything please let me know...Any process are appreciated as long as within swift.


Solution

  • I was stuck because of the logic to implement this. Finally I got an way to set the progress bar and slider with the percentage i.e multiplier.

    • Firstly, I set the progress bar to 100%,
    • Then, I set the multiplier, which will set the percentage of progress-bar UI limit and set it to its position right next to the slider.
    • And finally, The red icon is minimum value image for slider which sticks to the progress-bar trailing margin, (programmatically constraints).

      Or, via Storyboard You could just position it to the view in-between first(i.e. ProgressView) and second(i.e. SliderView) view.

    So, the UISlider will get its position from 100% of the view width - % covered by the progress-bar

    EDIT: - I may provide the code sample, if required.. just let me know. :) Happy Coding: )