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];
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.