Tengo adaptado esta clase que te puede servir. No hereda de UISlider
sino de UIControl
.
class CustomUISlider: UIControl {
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
En el slider agregas la clase CustomUISlider
y luego agregas el siguiente código; recalco que es una simplificación del código original.
public required override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
public convenience init(frame: CGRect = .zero, completion: ((CustomUISlider) -> Void)? = nil) {
self.init(frame: frame)
completion?(self)
}
@IBInspectable open var minValue: CGFloat = 0.0 {
didSet {
refresh()
}
}
@IBInspectable open var maxValue: CGFloat = 100.0 {
didSet {
refresh()
}
}
@IBInspectable open var selectedMinValue: CGFloat = 0.0 {
didSet {
if selectedMinValue < minValue {
selectedMinValue = minValue
}
}
}
@IBInspectable open var selectedMaxValue: CGFloat = 0.0 {
didSet {
if selectedMaxValue > maxValue {
selectedMaxValue = maxValue
}
}
}
open var minLabelFont: UIFont = UIFont.systemFont(ofSize: 12.0) {
didSet {
minLabel.font = minLabelFont as CFTypeRef
minLabel.fontSize = minLabelFont.pointSize
}
}
open var maxLabelFont: UIFont = UIFont.systemFont(ofSize: 12.0) {
didSet {
maxLabel.font = maxLabelFont as CFTypeRef
maxLabel.fontSize = maxLabelFont.pointSize
}
}
open var numberFormatter: NumberFormatter = {
let formatter: NumberFormatter = NumberFormatter()
formatter.numberStyle = .decimal
formatter.maximumFractionDigits = 0
return formatter
}()
@IBInspectable open var hideLabels: Bool = false {
didSet {
minLabel.isHidden = hideLabels
maxLabel.isHidden = hideLabels
}
}
@IBInspectable open var labelsFixed: Bool = false
@IBInspectable open var minDistance: CGFloat = 0.0 {
didSet {
if minDistance < 0.0 {
minDistance = 0.0
}
}
}
@IBInspectable open var maxDistance: CGFloat = .greatestFiniteMagnitude {
didSet {
if maxDistance < 0.0 {
maxDistance = .greatestFiniteMagnitude
}
}
}
@IBInspectable open var minLabelColor: UIColor?
@IBInspectable open var maxLabelColor: UIColor?
@IBInspectable open var handleColor: UIColor?
@IBInspectable open var handleBorderColor: UIColor?
@IBInspectable open var colorBetweenHandles: UIColor?
@IBInspectable open var initialColor: UIColor?
@IBInspectable open var disableRange: Bool = false {
didSet {
minLabel.isHidden = disableRange
}
}
@IBInspectable open var enableStep: Bool = false
@IBInspectable open var step: CGFloat = 0.0
@IBInspectable open var handleImage: UIImage? {
didSet {
guard let image = handleImage else {
return
}
var handleFrame = CGRect.zero
handleFrame.size = image.size
rightHandle.frame = handleFrame
rightHandle.contents = image.cgImage
}
}
@IBInspectable open var handleDiameter: CGFloat = 16.0 {
didSet {
rightHandle.cornerRadius = handleDiameter / 2.0
rightHandle.frame = CGRect(x: 0.0, y: 0.0, width: handleDiameter, height: handleDiameter)
}
}
@IBInspectable open var selectedHandleDiameterMultiplier: CGFloat = 1.7
@IBInspectable open var lineHeight: CGFloat = 1.0 {
didSet {
updateLineHeight()
}
}
@IBInspectable open var handleBorderWidth: CGFloat = 0.0 {
didSet {
rightHandle.borderWidth = handleBorderWidth
}
}
@IBInspectable open var labelPadding: CGFloat = 8.0
@IBInspectable open var minLabelAccessibilityLabel: String?
@IBInspectable open var maxLabelAccessibilityLabel: String?
@IBInspectable open var minLabelAccessibilityHint: String?
@IBInspectable open var maxLabelAccessibilityHint: String?
private enum HandleTracking { case none, left, right }
private var handleTracking: HandleTracking = .none
private let sliderLine: CALayer = CALayer()
private let sliderLineBetweenHandles: CALayer = CALayer()
private let leftHandle: CALayer = CALayer()
private let rightHandle: CALayer = CALayer()
fileprivate let minLabel: CATextLayer = CATextLayer()
fileprivate let maxLabel: CATextLayer = CATextLayer()
private var minLabelTextSize: CGSize = .zero
private var maxLabelTextSize: CGSize = .zero
private var previousStepMinValue: CGFloat?
private var previousStepMaxValue: CGFloat?
private var accessibleElements: [UIAccessibilityElement] = []
private var leftHandleAccessibilityElement: UIAccessibilityElement {
let element: CustomUISliderLeftElement = CustomUISliderLeftElement(accessibilityContainer: self)
element.isAccessibilityElement = true
element.accessibilityLabel = minLabelAccessibilityLabel
element.accessibilityHint = minLabelAccessibilityHint
element.accessibilityValue = minLabel.string as? String
element.accessibilityFrame = convert(leftHandle.frame, to: nil)
element.accessibilityTraits = UIAccessibilityTraits.adjustable
return element
}
private var rightHandleAccessibilityElement: UIAccessibilityElement {
let element: CustomUISliderRightElement = CustomUISliderRightElement(accessibilityContainer: self)
element.isAccessibilityElement = true
element.accessibilityLabel = maxLabelAccessibilityLabel
element.accessibilityHint = maxLabelAccessibilityHint
element.accessibilityValue = maxLabel.string as? String
element.accessibilityFrame = convert(rightHandle.frame, to: nil)
element.accessibilityTraits = UIAccessibilityTraits.adjustable
return element
}
open override func layoutSubviews() {
super.layoutSubviews()
if handleTracking == .none {
updateLineHeight()
updateColors()
}
}
open override var intrinsicContentSize: CGSize {
return CGSize(width: UIView.noIntrinsicMetric, height: 65.0)
}
open override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
let touchLocation: CGPoint = touch.location(in: self)
let insetExpansion: CGFloat = -30.0
let isTouchingRightHandle: Bool = rightHandle.frame.insetBy(dx: insetExpansion, dy: insetExpansion).contains(touchLocation)
guard isTouchingRightHandle else { return false }
let distanceFromLeftHandle: CGFloat = touchLocation.distance(to: leftHandle.frame.center)
let distanceFromRightHandle: CGFloat = touchLocation.distance(to: rightHandle.frame.center)
if distanceFromLeftHandle < distanceFromRightHandle && !disableRange {
handleTracking = .left
} else if selectedMaxValue == maxValue && leftHandle.frame.midX == rightHandle.frame.midX {
handleTracking = .left
} else {
handleTracking = .right
}
let handle: CALayer = (handleTracking == .left) ? leftHandle : rightHandle
animate(handle: handle, selected: true)
return true
}
open override func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
guard handleTracking != .none else { return false }
let location: CGPoint = touch.location(in: self)
let percentage: CGFloat = (location.x - sliderLine.frame.minX - handleDiameter / 2.0) / (sliderLine.frame.maxX - sliderLine.frame.minX)
let selectedValue: CGFloat = percentage * (maxValue - minValue) + minValue
switch handleTracking {
case .left:
selectedMinValue = min(selectedValue, selectedMaxValue)
case .right:
if disableRange && selectedValue >= minValue {
selectedMaxValue = selectedValue
} else {
selectedMaxValue = max(selectedValue, selectedMinValue)
}
case .none:
break
}
refresh()
return true
}
open override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
let handle: CALayer = (handleTracking == .left) ? leftHandle : rightHandle
animate(handle: handle, selected: false)
handleTracking = .none
}
open override func accessibilityElementCount() -> Int {
return accessibleElements.count
}
open override func accessibilityElement(at index: Int) -> Any? {
return accessibleElements[index]
}
open override func index(ofAccessibilityElement element: Any) -> Int {
guard let element = element as? UIAccessibilityElement else { return 0 }
return accessibleElements.firstIndex(of: element) ?? 0
}
private func setup() {
isAccessibilityElement = false
accessibleElements = [rightHandleAccessibilityElement]
layer.addSublayer(sliderLine)
layer.addSublayer(sliderLineBetweenHandles)
rightHandle.cornerRadius = handleDiameter / 2.0
rightHandle.borderWidth = handleBorderWidth
layer.addSublayer(rightHandle)
let handleFrame: CGRect = CGRect(x: 0.0, y: 0.0, width: handleDiameter, height: handleDiameter)
rightHandle.frame = handleFrame
refresh()
}
private func percentageAlongLine(for value: CGFloat) -> CGFloat {
guard minValue < maxValue else { return 0.0 }
let maxMinDif: CGFloat = maxValue - minValue
let valueSubtracted: CGFloat = value - minValue
return valueSubtracted / maxMinDif
}
private func xPositionAlongLine(for value: CGFloat) -> CGFloat {
let percentage: CGFloat = percentageAlongLine(for: value)
let maxMinDif: CGFloat = sliderLine.frame.maxX - sliderLine.frame.minX
let offset: CGFloat = percentage * maxMinDif
return sliderLine.frame.minX + offset
}
private func updateLineHeight() {
let barSidePadding: CGFloat = 16.0
let yMiddle: CGFloat = frame.height / 2.0
let lineLeftSide: CGPoint = CGPoint(x: barSidePadding, y: yMiddle)
let lineRightSide: CGPoint = CGPoint(x: frame.width - barSidePadding,
y: yMiddle)
sliderLine.frame = CGRect(x: lineLeftSide.x,
y: lineLeftSide.y,
width: lineRightSide.x - lineLeftSide.x,
height: lineHeight)
sliderLine.cornerRadius = lineHeight / 2.0
sliderLineBetweenHandles.cornerRadius = sliderLine.cornerRadius
}
private func updateColors() {
let isInitial: Bool = selectedMinValue == minValue && selectedMaxValue == maxValue
if let initialColor = initialColor?.cgColor, isInitial {
minLabel.foregroundColor = initialColor
maxLabel.foregroundColor = initialColor
sliderLineBetweenHandles.backgroundColor = initialColor
sliderLine.backgroundColor = initialColor
let color: CGColor = (handleImage == nil) ? initialColor : UIColor.clear.cgColor
rightHandle.backgroundColor = color
rightHandle.borderColor = color
} else {
let tintCGColor: CGColor = tintColor.cgColor
minLabel.foregroundColor = minLabelColor?.cgColor ?? tintCGColor
maxLabel.foregroundColor = maxLabelColor?.cgColor ?? tintCGColor
sliderLineBetweenHandles.backgroundColor = colorBetweenHandles?.cgColor ?? tintCGColor
sliderLine.backgroundColor = tintCGColor
let color: CGColor
if let _ = handleImage {
color = UIColor.clear.cgColor
} else {
color = handleColor?.cgColor ?? tintCGColor
}
rightHandle.backgroundColor = color
rightHandle.borderColor = handleBorderColor.map { $0.cgColor }
}
}
private func updateHandlePositions() {
leftHandle.position = CGPoint(x: xPositionAlongLine(for: selectedMinValue),
y: sliderLine.frame.midY)
rightHandle.position = CGPoint(x: xPositionAlongLine(for: selectedMaxValue),
y: sliderLine.frame.midY)
sliderLineBetweenHandles.frame = CGRect(x: leftHandle.position.x,
y: sliderLine.frame.minY,
width: rightHandle.position.x - leftHandle.position.x,
height: lineHeight)
}
private func updateFixedLabelPositions() {
minLabel.position = CGPoint(x: xPositionAlongLine(for: minValue),
y: sliderLine.frame.minY - (minLabelTextSize.height / 2.0) - (handleDiameter / 2.0) - labelPadding)
maxLabel.position = CGPoint(x: xPositionAlongLine(for: maxValue),
y: sliderLine.frame.minY - (maxLabelTextSize.height / 2.0) - (handleDiameter / 2.0) - labelPadding)
if minLabel.frame.minX < 0.0 {
minLabel.frame.origin.x = 0.0
}
if maxLabel.frame.maxX > frame.width {
maxLabel.frame.origin.x = frame.width - maxLabel.frame.width
}
}
fileprivate func refresh() {
let diff: CGFloat = selectedMaxValue - selectedMinValue
if diff < minDistance {
switch handleTracking {
case .left:
selectedMinValue = selectedMaxValue - minDistance
case .right:
selectedMaxValue = selectedMinValue + minDistance
case .none:
break
}
} else if diff > maxDistance {
switch handleTracking {
case .left:
selectedMinValue = selectedMaxValue - maxDistance
case .right:
selectedMaxValue = selectedMinValue + maxDistance
case .none:
break
}
}
if selectedMinValue < minValue {
selectedMinValue = minValue
}
if selectedMaxValue > maxValue {
selectedMaxValue = maxValue
}
CATransaction.begin()
CATransaction.setDisableActions(true)
updateHandlePositions()
CATransaction.commit()
}
private func animate(handle: CALayer, selected: Bool) {
let transform: CATransform3D
if selected {
transform = CATransform3DMakeScale(selectedHandleDiameterMultiplier, selectedHandleDiameterMultiplier, 1.0)
} else {
transform = CATransform3DIdentity
}
CATransaction.begin()
CATransaction.setAnimationDuration(0.3)
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut))
handle.transform = transform
CATransaction.commit()
}
}
private final class CustomUISliderLeftElement: UIAccessibilityElement {
override func accessibilityIncrement() {
guard let slider = accessibilityContainer as? CustomUISlider else { return }
slider.selectedMinValue += slider.step
accessibilityValue = slider.minLabel.string as? String
}
override func accessibilityDecrement() {
guard let slider = accessibilityContainer as? CustomUISlider else { return }
slider.selectedMinValue -= slider.step
accessibilityValue = slider.minLabel.string as? String
}
}
private final class CustomUISliderRightElement: UIAccessibilityElement {
override func accessibilityIncrement() {
guard let slider = accessibilityContainer as? CustomUISlider else { return }
slider.selectedMaxValue += slider.step
slider.refresh()
accessibilityValue = slider.maxLabel.string as? String
}
override func accessibilityDecrement() {
guard let slider = accessibilityContainer as? CustomUISlider else { return }
slider.selectedMaxValue -= slider.step
slider.refresh()
accessibilityValue = slider.maxLabel.string as? String
}
}
private extension CGRect {
var center: CGPoint {
return CGPoint(x: midX, y: midY)
}
}
private extension CGPoint {
func distance(to: CGPoint) -> CGFloat {
let distX: CGFloat = to.x - x
let distY: CGFloat = to.y - y
return sqrt(distX * distX + distY * distY)
}
}
El código original lo puedes revisar en el siguiente link: GitHub-RangeSeekSlider
En el ViewController
puedes setear la configuración del slider:
class ViewController: UIViewController {
@IBOutlet weak var slider: CustomUISlider!
override func viewDidLoad() {
super.viewDidLoad()
//Configuras los valores del slider.
slider.minValue = 0.0
slider.maxValue = 100.0
slider.selectedHandleDiameterMultiplier = 1.0
slider.colorBetweenHandles = .red
slider.lineHeight = 30.0
}
}
El resultado final quedaría así:
