Search code examples
iosuislider

How can you show values of UISlider below it on screen like shown in the picture?

enter image description here

I am new to ios development.I have to design this screen.I have used image to show numbers below slider but it does not look good on large screen.Please tell me the other ways to do it.And please tell me that how can i set coordinates if i want to draw these numbers as i am using autolayout. Thanks

Solution

  • If you want to do it programmatically, take a look at Vvk Aghera's answer. If you want to do it 'visually' with interface builder, the easiest way to accomplish that is by using stack views.

    1. Set up your view

    In Interface Builder you add a slider element and a label per number (so 11 in total).

    Put the labels in a horizontal stack view, and set the distribution to 'fill equally' in the attributes inspector:

    attributes inspector

    You can also easily configure the text color and center the alignment of the labels by selecting all of them and opening the attributes inspector:

    attributes inspector of multiple labels


    Put the horizontal stack view and the slider in a vertical stack view, giving you something like this:

    Slider with labels

    This is what your view hierarchy should look like:

    • Stack View (vertical)
      • Slider
      • Stack View (horizontal)
        • label
        • label
        • ...

    Screenshot:

    View hierarchy


    2. Configure slider

    Then you can configure the slider using the attributes inspector. There you can for instance set the maximum value to 100:

    Slider attributes

    If you need help with wiring up the slider to your controller and accessing its value, take a look at these tutorials:

    Don't forget the UISlider class reference.