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

相关文章
|
8月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
322 1
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
6月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
57 1
|
8月前
|
JavaScript
vue中轻松搞掂鼠标气泡框提示框tip跟随
vue中轻松搞掂鼠标气泡框提示框tip跟随
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
190 0
|
8月前
|
Web App开发 前端开发
canvas详解02-样式和颜色控制
canvas详解02-样式和颜色控制
130 1
|
8月前
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
自定义scroll滑块样式
自定义scroll滑块样式
69 0
自定义过渡动画
自定义过渡动画
128 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">//这是最粗糙的使用方式
995 0
range滑块自定义样式,步骤详解以及实际应用

热门文章

最新文章