响应式、多处理 HTML 5 或 javascript 范围滑块

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14127689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 15:47:20  来源:igfitidea点击:

Responsive, multi-handle HTML 5 or javascript range slider

javascripthtmlrangeresponsive-design

提问by jcbfshr

I'm currently working on a responsive site and would like to employ a multi-handle range slider. I have worked with some javascript solutions that worked ok, but were not responsive.

我目前正在一个响应式网站上工作,并希望使用多手柄范围滑块。我使用过一些可以正常工作但没有响应的 javascript 解决方案。

I have considered the option of two html5 range inputs, which degrade gracefully to text inputs on older browsers. I would however, like to know if anyone has come across a javascript solution for a range slider with multiple handles, that works in responsive environments. Any ideas or tips?

我已经考虑了两个 html5 范围输入的选项,它可以优雅地降级为旧浏览器上的文本输入。但是,我想知道是否有人遇到过用于具有多个手柄的范围滑块的 javascript 解决方案,该解决方案适用于响应式环境。任何想法或提示?

采纳答案by Bastian Rang

i used the fd-slider polyfill/ with modernizr-loader, it was usable on the ipad. further devices were not tested, because the small-screen version didn't used them.

我使用了fd-slider polyfill/ 和Modernizr-loader,它可以在 ipad 上使用。其他设备没有测试,因为小屏幕版本没有使用它们。

回答by Lg102

You could have a look at noUiSlider.

你可以看看noUiSlider

It supports touch on a bunch of devices, and it works well with responsive designs. There's no dependencies on jQuery etc.

它支持在一堆设备上触摸,并且可以很好地与响应式设计配合使用。没有对 jQuery 等的依赖。

Disclosure:I made it.

披露:我做到了。

回答by maslick

Check out my sliderI've written for my personal use a while ago. It has both the linear(horizontal/vertical) and circularimplementations, works on desktop and mobile, it is lightweight (~5Kb) and fully customizable.

查看我不久前为个人使用而编写的滑块。它具有线性(水平/垂直)和圆形实现,适用于桌面和移动设备,它是轻量级的(~5Kb)并且完全可定制。

enter image description hereenter image description here

在此处输入图片说明在此处输入图片说明

回答by Endre Simo

Try jQuery range slider: http://jqueryui.com/slider/#range.

尝试 jQuery 范围滑块:http: //jqueryui.com/slider/#range

It's well supported among different browsers.

它在不同的浏览器中得到很好的支持。

回答by dy_

Multihandle slider composed of 2 native inputs, by Lea Verou here

由 2 个本机输入组成的多手柄滑块,由 Lea Verou在这里

回答by Mark

For those who still end up here, looking around for options, I came across this one:

对于那些仍然在这里寻找选择的人,我遇到了这个:

http://vanderlee.github.io/limitslider/

http://vanderlee.github.io/limitslider/

It allows you to pass an array of values, and even style the gaps between via an array of options.

它允许您传递一组值,甚至可以通过一组选项设置间隙的样式。