eliotfowler/efcircularslider

An extensible circular slider for iOS applications

EFCircularSlider

An extensible circular slider for iOS applications.

Demo

The code to make this GIF is in the ExampleProject/ directory:

Installation

The simplest way to use EFCircularSlider in your application is with CocoaPods. See the "Getting Started" guide for more information.

Podfile

platform :ios, '7.0'
pod "EFCircularSlider", "~> 0.1.0"

You could instead clone the project and copy the EFCircularSlider/EFCircularSlider.{h,m} files into your project.

Initialization

Adding EFCircularSlider to your project is as simple as getting the source files, and waving a magic wand:

- (void)viewDidLoad {
	...
	CGRect sliderFrame = CGRectMake(110, 150, 100, 100);
    EFCircularSlider* circularSlider = [[EFCircularSlider alloc] initWithFrame:sliderFrame];
    [self.view addSubview:circularSlider];
    ...
}

And then, just like you would for any other control, you need to subscribe to the event chagning using target-action behavior:

[slider addTarget:self action:@selector(newValue:) forControlEvents:UIControlEventValueChanged];

Options

EFCircularSlider is made to be very easy to style and customize.

###Properties

####minimumValue:(float) - Default: 0.0f

When the slider is at the very top position, it will set the currentValue to this.

You can set the minimum value with:

circularSlider.minimumValue = 1.0f;

####maximumValue:(float) - Default 100.0f

With EFCircularSlider, the currentValue increases as you drag the slider clockwise. Therefore, when the slider is just to the left of the very top position, it will approach (but never reach) this.

You can set the maximum value with:

circularSlider.minimumValue = 100.0f;

####currentValue:(float) - Default 0.0f

Whenever the slider changes position, this value will change. It will be a normalized value based on the minimuimValue and maximumValue properties.

You can get the currentValue with:

float val = circularSlider.currentValue;

####lineWidth:(int) - Default 5

This determines the width of the arc that makes up the slider. This will set the value both for the unfilled arc (the background) and the arc that shows how much of the slider has been slid across. Currently, changing the lineWidth more than a few pixels causes adverse side effects, mainly with the handle.

You can modify the lineWidth with:

circularSlider.lineWidth = 6;

####handleColor:(UIColor*) - Default [UIColor redColor]

The handle is the part of the slider that you drag with your finger.

Modify the color of the handle with:

CGFloat hue = ( arc4random() % 256 / 256.0 );
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;

circularSlider.handleColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

####handleType:(EFHandleType) - Default EFSemiTransparentWhiteCircle

EFCircularSlider comes with 4 types of handles:

• EFSemiTransparentWhiteCircle
• EFSemiTransparentBlackCircle
• EFDoubleCircleWithOpenCenter
• EFDoubleCircleWithClosedCenter
• EFBigCircle

You can change the handleType with:

circularSlider.handleType = EFDoubleCircleWithClosedCenter;

####unfilledColor:(UIColor*) - Default [UIColor blackColor]

This is the color that will show if the slider is set to its minimum value.

You can modify the unfilledColor with:

circularSlider.unfilledColor = [UIColor purpleColor];

####filledColor:(UIColor*) - Default [UIColor redColor]

This is the color that will show between the minimum value and the currentValue.

You can modify the filledColor with:

circularSlider.unfilledColor = [UIColor purpleColor];

####labelFont:(UIFont*) - Default [UIFont systemFontOfSize:10.0f]

This is the font that the labels will have if you decide to set inner marking labels (more on this down the page).

You can modify the labelFont with:

circularSlider.labelFont = [UIFont systemFontOfSize:14.0f];

Note this will have no effect if you have not passed in the labels that you want to add

####snapToLabels:(BOOL) - Default NO

If this is set to YES, once finish dragging the slider, it will snap to the closest label and subsequently set the current value to what it would be at that label, not where you dragged it.

You can set the slider to snap to labels with:

circularSlider.snapToLabels = YES;

Note this will have no effect if you have not passed in the labels that you want to add

###Functions

####-(void)setInnerMarkingLabels:(NSArray*)labels

You can send this method an array of labels and they will show up on the inside of the slider. There is currently no way to specify the spacing between the labels and therefore they will be evenly spaced out. If you choose to include labels on your slider, you will then have the option to set the font of the label as well as if the slider should snap to the closest label position after the value changes.

The first label will appear at the 1 o'clock position (if it were a clock).

If you wanted to make your slider look like a clock, you would do the following:

NSArray* hoursArray = @[@"1", @"2", @"3", @"4", @"5", @"6", @"7", @"8", @"9", @"10", @"11", @"12"];
[circularSlider setInnerMarkingLabels:hoursArray];

Alarm Clock Demo Design

The alarm clock demo design is an implemented version of a design from Micael Sambora on Dribbble and can be found here.

More information about Michael Sambora can be found at his personal website.

About the developer

If you like this control, follow @EliotFowler on Twitter and let me know!

License (MIT)

Copyright (c) 2013 Eliot Fowler

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

efcircularslider's Issues

default value on slider

Hey I love your slider control! But I was wondering if there was a way to have it start out at a predefined default position instead of always at zero? I want to preset my sliders at some predefined value.

For Android

Is this slider is available for android ?

EFCircularSlider and Swift

Hi, when I try to compile the code using EFCircularSlider imported with bridging header in swift I get 18 errors "Explected a type" in EFCircularTrig.h, what could it be the problem?
Thanks.

Setting currentValue animated

Setting the currentValue of the slider directly works perfectly. When I try to set it in an animation though the drawn elements are not properly rendered.

This is how I tried to animate:

[UIView animateWithDuration:1.f animations:^{
    self.hourSlider.currentValue = 50;
}];

It would be cool to have a setCurrentValue:animated: similar to UIProgressView's setProgress:Animated:.

update slider from another slider

Is there a way to update a slider from another slider ? thank you

Clipping on sides of slider

Perhaps it's just me, but I've noticed that the top, bottom, left, and right side of the slider are just slightly clipped.

Maximum Value and Value per step

First of all thanks for such a cool control.
I'm using your control in my app for the purpose of time selection. User can select amount of time upto 12 hours. For precision purposes I'm using 0 seconds as min and 43200 sec as max value. Now I'm facing 2 problems:

1. Every time the I move the handle the value is incremented by 120sec which means a step of 2 mins. I want it to be 60 sec. But i'm able to find the code where i can edit it.
2. On an analog clock after 11:59 we go to 00:00. That's understandable But unluckily my requirement is that I can go to 12h. But it jumps to 0 after 11:58. if i increment my max value by another 2 mins then it solves the problem but a space can be seen between the fill line ends. Tell me if something is possible for this case.

Slider captures all touch gestures that begin outside of circle but within the frame rectangle

Concentric circles are cool, man. But when you have some sliders are laid on top of each other quite close, (like the time picker demo), touch events get mucked up.

The culprit is the following in EFCircularSlider:

-(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
    [super beginTrackingWithTouch:touch withEvent:event];

    return YES;
}

This should do a bounds check with the circle first — only if the touch lies within the circle should the tracking begin. Otherwise, the touch should fall through to the next picker (say, the hour picker), whose circle bounds check should succeed.

Snap to first label from left side

The slider won't snap to the first label from the left side. It always snaps back to the previous one.

To reproduce:

• Open the demo
• Go to the snap to labels example
• Drag the slider to 99% or just to the left of the 'A'
• It should snap to the 'A' but it snaps to the 'E' instead

Changing the angle of minimum value

How can i change the angle of minimum value ?? so it's start from the right and not the top

Set UIImage to Handle

Is it possible to set an image as the the circular slider handle?

Something like:
circularSlider.handleType = CircularSliderHandleTypeCustom
would be great.

Prevent the slider from going past max duration

Thanks for this AWESOME slider !

I'm wondering if there is a way to prevent the slider from being dragged beyond the maximum duration ?

Thanks!

Slider won't snap to first label properly

If snapToLabels == YES and the slider is dragged just to the left of the first label, it will snap to the nth label.

Set current value programatically

How can i set the currentValue programatically and apply to the interface?

Degree in circular slider

I love your circular slider! Just a few days and it has already gathered many likes.

Would like to know if it is possible to have a circular slider like the one used in clock to have it used with 999 values. However, the most chosen values are 1-20 so if that is the case, the slider will usually remain in less than the first quarter of the circle.

I was thinking of a circular slider that utilizes degree as a reference, for example, 1-30 belongs to 360 degree. When I slide around within the 360 degree (1 circle), I will be able to choose only 1-30. Continuing the degree toward 720 degree will get me values of the range 30-60 or if there is momentum, the values will be higher and goes straight to 999 when I slide within 3 rounds. This would be fun for the users.

I wonder if this is doable in the current version, if so, how do I proceed?
@Gissues:{"order":50,"status":"inprogress"}

How to get the revolutions count?

I would like to count the number of times I do a revolution. Anyone have an idea?

Can't change currentValue

Every time I call "setCurrentValue" the value received is OK, the currentValue is changed but in drawRect, currentValue stay at 0...

And it's the same with maximumValue.

How to start Slider from Bottom ?

@eliotfowler
Hello Sir,
Your Library is very good to use. But I'm not able to start the slider from bottom. If you can please help I will be thankful. And another thing make something like Semi Circular slider and give it like another property of circular slider. The function DrawLine is not there in tour code to edit.

Half circle slider.

Is it possible to draw only a half circle slider?

@fatuhoku
@hodgesmr
@eliotfowler
@kenthumphries
@ciotto

setCurrentValue doesn't work

Every time I call setCurrentValue, the current value is set, but nothing is drawn.

How to prevent currentValue from being reset to zero?

First thank you for your working at this to give us so amazing thing.
But I got a problem when I use it.

I wanna use this to get amounts of circle.It means when the currentValue becomes max I get first circle that is an hour.Then if it becomes the second max, I get second circle means two hours.

Now here, I don't know how to detect when is a circle is completed by user.
If the current won't be reset to zero, it will be easy for everything.

Could you help me?

Unable to change color of handle

I'm using this circular slider as a music progress bar, and would like to make the handle not visible since it indicates some possibility of user interaction. I tried to set the handleColor to a clearColor and to colorWithHue:0 saturation:0 brightness:0 alpha:0 and neither settings were responsive visually. Based on further testing, my issue is that setting the handleColor doesn't seem to have any effect. I have tested this on all handle types (including leaving type set to the default value).

Value on the circle move

Your EFCircularSlider it just amazing and the cuztomization with my needs are so easy to use i want to make than in the circle is move arounde the big circle in the circle that moves around to show the value instead on a label, i have some issue trying to implement this featured.
How you mind helping me with this issue???

Start slider from another position.

How could I change slider starting point? For example from west instead north?