MidpointSlider is a custom iOS control that allows the user to pull left or right from the slider's center when choosing a value.
- Xcode 7.x
- Swift 2.x
- iOS Deployment Target (earliest supported version) is 8.3
MidpointSlider is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "MidpointSlider"
For example, the Podfile in your project directory should resemble the following:
platform :ios, '8.3'
use_frameworks!
target 'YourProjectName' do
pod 'MidpointSlider'
end
Alternatively, you can manually copy the following files directly into your Xcode project:
To run the example project, clone the repo, and run pod install
from the Example directory first.
Alternatively, see the code sample below:
// STEP 1: Import the MidpointSlider.
import MidpointSlider
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// STEP 2: Instantiate a new MidPointSlider.
let midpointSlider = MidpointSlider(frame: CGRect(x: 40, y: 300, width: 300, height: 30))
// STEP 3: Set the minimum and maximum values for the slider and the starting value.
midpointSlider.minimumValue = -100
midpointSlider.maximumValue = 100
midpointSlider.currentValue = 70
// Optional: Set the color of the MidpointSlider to match the look and feel of your app.
midpointSlider.trackTintColor = UIColor.orangeColor()
// STEP 4: Add a target and action to handle when user changes the slider value.
midpointSlider.addTarget(self, action: "midpointSliderValueChanged:", forControlEvents: UIControlEvents.ValueChanged)
// STEP 5: Add the MidpointSlider to your view.
view.addSubview(midpointSlider)
}
// STEP 6: Declare your action method to handle when the slider value changes.
func midpointSliderValueChanged(midpointSlider: MidpointSlider) {
let sliderValue = midpointSlider.currentValue
print("Value changed to : \(sliderValue))")
}
}
MidpointSlider can also be added to your project using Storyboards by performing the following steps:
Step 1. In Xcode, drag a UIView to your target scene in your Storyboard. In the Size Inspector, change the height of the view to 30. Change the width and position to any values that you'd like. See screenshot below.
Step 2. In the Identity Inspector, declare the class as MidpointSlider and press enter. You will see the MidpointSlider control appear. See screenshot below.
Step 3. In the Attributes Inspector, change the minimum slider value, maximum slider value, current value, and tint color of the MidpointSlider to values that make sense for your application. See screenshot below.
Step 4. 'Control Button Drag' from the MidpointSlider on your scene to your associated ViewController class. Choose the following options to create an action method:
- Connection = Action
- Name = handleValueChanged (or any other meaningful action method name)
- Type = MidpointSlider
Click on the Connect button. See screenshot below.
Step 5. Add an Import statement for the library and Implement your action method.
For example:
import MidpointSlider
...
@IBAction func handleValueChanged(sender: MidpointSlider) {
let sliderValue = midpointSlider.currentValue
print("Value changed to : \(sliderValue))")
}
Clint Cabanero
- Twitter: @clintcabanero
- GitHub: ccabanero
MidpointSlider is available under the MIT license. See the LICENSE file for more info.