自定义的一个双向滑块(Slider)

简介: 这个是在一次和朋友吃饭的时候,我们唠嗑的时候他说的一个需求。因为系统的Slider是只有一个滑块的,而且没有分段滑动的效果。这不最近都在研究这么个需求。

ZPSlider

一个双向滑块的Slider

前提

这个是在一次和朋友吃饭的时候,我们唠嗑的时候他说的一个需求。因为系统的Slider是只有一个滑块的,而且没有分段滑动的效果。
这不最近都在研究这么个需求。

How to use it

-(instancetype)initWithFrame:(CGRect)frame
                sliderTitles:(NSArray *)titleArray
           defaultFirstIndex:(CGFloat)defaultFirstIndex
            defaultLastIndex:(CGFloat)defaultLastIndex
                 sliderImage:(UIImage *)sliderImage;

这就是一个极其普通的初始化函数,只要传入你的slider两边滑块的初始位置,和你滑块的图片就可以了。

※友情提示,你传的位置一定要在你的数组范围之内。

这里还有个block用于传出最终选择的参数

typedef void(^sliderValueChange)(int firstIndexPath , int lastIndexPath);

我这个Demo只是传出了index,各位可以根据需要修改传出的参数。

传送门

github:https://github.com/cAibDe/ZPSlider

相关文章
|
9月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
352 1
|
定位技术
百度地图:监听地图缩放自动显示和隐藏的富文本标签
百度地图:监听地图缩放自动显示和隐藏的富文本标签
216 0
|
6月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
|
API
移动端拖动滑块验证
移动端拖动滑块验证
218 0
自定义scroll滑块样式
自定义scroll滑块样式
74 0
自定义过渡动画
自定义过渡动画
135 0
自定义过渡动画
|
Web App开发 移动开发 JavaScript
range滑块自定义样式,步骤详解以及实际应用
写在前面: 本文的主要内容包括:type="range"属性介绍,修改range默认css样式以及在js中的实际应用。本文面向前端小白,写的不好之处,请多多见谅。文末有demo链接,可以自行复制到本地进行试验。 相关:自定义 range radio select的样式滑轮,按钮,选择框 最终要实现的效果: 步骤: 1.range属性相关介绍 2.搭建html结构; 3.css样式修改,包括给滑动轨道添加样式、给滑块添加样式; 4.添加相关js代码实现应用效果; 5.关于浏览器兼容。 在html里面输入如下内容,即可使用: <input type="range">//这是最粗糙的使用方式
1004 0
range滑块自定义样式,步骤详解以及实际应用
|
JavaScript
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
557 0
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高