Latest0.1.0
Homepagehttps://github.com/mludowise/VerticalSteppedSlider
LicenseMIT
Platformsios 8.0
FrameworksUIKit
Authors

CI Status
Version
License
Platform

Introduction

VerticalSteppedSlider is a completely configurable slider for iOS written in Swift. Configure custom track widths, colors, or images, set the size of the step inrements as well as vertical orientation.

Demo

animated demo

To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

VerticalSteppedSlider is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'VerticalSteppedSlider'

Usage

Firstly, import VerticalSteppedSlider.

import VerticalSteppedSlider

Initialization

There are two ways to create a VSSlider:

  • In the storyboard, change the class of a UIView to VSSlider and set the module to VerticalSteppedSlider.
  • In code using an init(frame:CGRect)

Using Increments

The property increment determines where the marks will be drawn on the slider and will round the value to the nearest increment after sliding the slider.

VerticalSteppedSlider

For example, if the minimumValue is -1, maximumValue is 1, and increment is 0.5, the a mark will be drawn at -0.5, 0, and 0.5. Likewise, the slider will only allow the values -1, -0.5, 0, 0.5, and 1 when sliding the slider.

Customizing the Slider’s Appearance

If you want to change the colors of the track and thumb, you can set custom tint colors for both the track and the thumb of a slider, using the minimumTrackTintColor, maximumTrackTintColor, markColor, and thumbTintColor properties. You can also specify the thickness of the track with trackWidth and the weight of the increment marks with markWidth. By default, the minimum track tint color defers to the tint color of the slider control.

VerticalSteppedSlider

You can more finely control the appearance of the slider by specifying the images used to draw the thumb and the track.

VerticalSteppedSlider

The trackExtendsUnderThumb property determines the length of the track. By default, the slider tracks extend before the minimumValue and after the maximumValue in order to make the thumb align with the beginning and end of the slider. This matches the default behavior of Apple’s UISlider To turn this off and view a more accurate slider, set trackExtendsUnderThumb to false.

VerticalSteppedSlider

Properties

TopicPropertyDescriptionTypeDefault Value
Accessing the Slider’s ValuevalueCurrent raw value of the slider, not rounded to the nearest the increment. See UISlider.value for more information.Float0
roundedValueComputed property that returns the value rounded to the nearest increment.Float
Accessing the Slider’s Value LimitsminimumValueSee UISlider.minimumValue for more information.Float0
maximumValueSee UISliuder.maximumValue for more information.Float1
incrementThe step increment for the slider. Set to 0 if the slider should be smooth and not round to the nearest increment.Float0.5
Modifying the Slider’s BehaviorisContinuousA Boolean value indicating whether changes in the slider’s value generate continuous update events. See UISlider.isContinuous.Booltrue
Changing the Slider’s AppearanceverticalIf orientation of slider should be vertical or horizontal.Booltrue
ascendingAscending is defined as:

  • Min on the left and max on the right when horizontal in left-to-right localized layouts.
  • Min on the right and max on the left when horizontal in right-to-left localized layouts.
  • Min on top and max on the bottom when vertical
Boolfalse
trackWidthThe thickness of the slider track in points.CGFloat2
trackExtendsUnderThumbDefines if the track should be slightly wider than its min and max values to accomodate for the width of the slider thumb. The value "true" replicates the behavior of UISlider but the increment marks will appear as though there is more space between the first and last marks and the ends of the slider.Booltrue
markWidthThe thickness of the increment marks on the slider in points.CGFloat1
markColorColor of the marks of the slider.UIColordarkGray
minimumTrackTintColorThe color used to tint the default minimum track images. If minimumTrackImage is non-nil, this is ignored. See UISlider.minimumTrackTintColor for more information.UIColor?nil
minimumTrackImageAssigns a minimum track image to the specified control states. Setting this image, calls setMinimumTrackImage() on the internal UISlider for the .normal state. If non-nil, overrides minimumTrackTintColor. See Apple’s Customizing the Slider’s Appearance for more information.UIImage?nil
maximumTrackTintColorThe color used to tint the default maximum track images. If minimumTrackImage is non-nil, this is ignored. See UISlider.minimumTrackTintColor for more information.UIColor?nil
maximumTrackImageAssigns a maximum track image to the specified control states. Setting this image, calls setMaximumTrackImage() on the internal UISlider for the .normal state. If non-nil, overrides maximumTrackTintColor. See Apple’s Customizing the Slider’s Appearance for more information.UIImage?nil
thumbTintColorThe color used to tint the default thumb images. If thumbImage is non-nil, this is ignored. See UISlider.thumbTintColor for more information.UIColor?nil
thumbImageAssigns a thumb image to the specified control states. If non-nil, overrides thumbTintColor. See Apple’s Customizing the Slider’s Appearance for more information.UIImage?nil

License

VerticalSteppedSlider is available under the MIT license. See the LICENSE file for more info.

Latest podspec

{
    "name": "VerticalSteppedSlider",
    "version": "0.1.0",
    "summary": "A completely configurable slider with options for steps, vertical orientation, and custom colors.",
    "description": "A completely configurable slider with options for steps, vertical orientation, and custom colors. Configurable in storyboard.",
    "homepage": "https://github.com/mludowise/VerticalSteppedSlider",
    "screenshots": [
        "https://github.com/mludowise/VerticalSteppedSlider/raw/master/readme_img/demo.gif",
        "https://github.com/mludowise/VerticalSteppedSlider/raw/master/readme_img/[email protected]",
        "https://github.com/mludowise/VerticalSteppedSlider/raw/master/readme_img/[email protected]",
        "https://github.com/mludowise/VerticalSteppedSlider/raw/master/readme_img/[email protected]"
    ],
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Mel Ludowise": "[email protected]"
    },
    "source": {
        "git": "https://github.com/mludowise/VerticalSteppedSlider.git",
        "tag": "0.1.0"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source_files": "VerticalSteppedSlider/Classes/**/*",
    "frameworks": "UIKit",
    "pushed_with_swift_version": "4.0"
}

Pin It on Pinterest

Share This