Get Updates By E-mail 

Article Written By:
Johann Dowa

An Easy To Use Customizable iOS Circular Range Slider UI Control


I’ve mentioned a number of interesting circular iOS user interface controls such as this control for creating icon based menus in a circular pattern, and this component for creating customizable circular progress views.

Here’s a very slick open source circular range slider control from Jaroslav Khorishchenko with easy setup and color customization.

To utilize SAMultiSectorControl you simply supply the color, range, and size as shown in this example from the readme:

//colors for circles
UIColor *redColor = [UIColor colorWithRed:245.0/255.0 green:76.0/255.0 blue:76.0/255.0 alpha:1.0];
UIColor *blueColor = [UIColor colorWithRed:0.0 green:168.0/255.0 blue:255.0/255.0 alpha:1.0];
UIColor *greenColor = [UIColor colorWithRed:29.0/255.0 green:207.0/255.0 blue:0.0 alpha:1.0];

//creating setctors objects
SAMultisectorSector *sector1 = [SAMultisectorSector sectorWithColor:redColor maxValue:16.0];
SAMultisectorSector *sector2 = [SAMultisectorSector sectorWithColor:blueColor maxValue:8.0];
SAMultisectorSector *sector3 = [SAMultisectorSector sectorWithColor:greenColor maxValue:1000.0];

//setting tags
sector1.tag = 0;
sector2.tag = 1;
sector3.tag = 2;

//setting start and end values
sector1.endValue = 13.0;
sector2.endValue = 3.0;
sector3.startValue = 300.0;
sector3.endValue = 650.0;

//displaying sectors
[self.multisectorControl addSector:sector1];
[self.multisectorControl addSector:sector2];
[self.multisectorControl addSector:sector3];

And here’s an animation from the readme showing  SAMultiSectorControl in action:

You can find SAMultiSectorControl on Github here.

A great looking range slider control.


Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.