先看效果图

截屏2022-12-05 14.53.09.png

截屏2022-12-05 14.54.57.png

截屏2022-12-05 14.55.57.png

直接上代码

import UIKit

class MMSlider: UISlider {
   private var lab = UILabel()
    private var unit = ""
    private var accuracy = 1
    private var sunmmary = ""
    var changed:((Bool)->())?
    /// 初始化
    /// - Parameters:
    ///   - showLabel: 绑定的显示label
    ///   - sunmmary: 显示文字的描述
    ///   - unit: 显示的单位
    ///   - accuracy: 显示的精度 例如 1（精确到个位）， 100 （精确到百位）
    init(_ showLabel:UILabel? = nil ,sunmmary:String = "", unit:String = "" , accuracy:Int = 1) {
        super.init(frame: .zero)
        showLabel != nil ? self.lab = showLabel! : nil
        self.unit = unit
        self.accuracy = accuracy
        self.sunmmary = sunmmary
        self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tapClick)))
        self.addTarget(self, action: #selector(sliderChage), for: .valueChanged)
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    /// 点击触发
    @objc private func tapClick(ges:UIGestureRecognizer) {
        let pointX =  ges.location(in: self).x
        var value = (self.maximumValue - self.minimumValue) * Float(pointX/self.bounds.width)
        value = Float(Int(value) / accuracy * accuracy)
        value += self.minimumValue
        self.setValue( value, animated: true)
        self.lab.text = sunmmary + "\(Int(value))" + unit
        self.changed?(true)
    }
    /// 滑动触发
    @objc private func sliderChage(_ slider:UISlider) {
        let value = Int(slider.value) / accuracy * accuracy
        lab.text = sunmmary + "\(Int(value))" + unit
        self.changed?(false)
    }
}

使用方法

和UIslider类似，但是这里是有封装绑定的UIlabel控件的，用来显示当前的数值。

 /// 饱和度 slider
    private lazy var slider :MMSlider = {
        let view = MMSlider(saturabilityLab, sunmmary: "饱和度 ",unit: "%",accuracy: 1)
        view.maximumValue = 100
        view.minimumValue = 0
        view.value = 50
        view.setThumbImage(UIImage(named: "ic_color_slider_white"), for: .normal)
        view.maximumTrackTintColor = .white
        return view
    }()

图片1 上的色温和RG值的效果也是用这个MMSlider实现的，
背景用图片，MMSlider放图片之上，滑块用自定义的图片就可以了
图片2上的渐变效果是用我之前的GradientView实现的，做为背景图。
如果大家有疑问，可以下面评论点赞。