自定义的一个双向滑块(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

相关文章
|
5月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
182 1
|
2月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
78 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
3月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
40 1
|
3月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
924 0
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
169 0
|
5月前
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
|
10月前
自定义scroll滑块样式
自定义scroll滑块样式
56 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">//这是最粗糙的使用方式
937 0
range滑块自定义样式,步骤详解以及实际应用
|
Dart 开发者
【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )(三)
【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )(三)
226 0
【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )(三)