Categories
Featured iPhone Development Resources iOS UI Controls iPad iPhone Objective-C

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:
SAMultiSectorControl

You can find SAMultiSectorControl on Github here.

A great looking range slider control.