天给大家分享一个功能超赞的Vue区间滑块组件VueSliderComponent。

vue-slider 一款强大到令人窒息的滑块选择器组件。顺滑般拖到效果，拥有多种主题样式（默认|antd|material），可以支持SSR、Typescript及更多滑块。

安装

$ npm i vue-slider-component -S

插件使用

<template>
  <div>
    <vue-slider
      v-model="value"
      :adsorb="true"
      :drag-on-click="true"
      :interval="10"
    >
    </vue-slider>
  </div>
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider
  },
  data () {
    return {
      value: [0, 5000]
    }
  }
}
</script>

提供各种丰富示例及API文档

附上演示示例及仓库链接

# 文档/演示地址
https://nightcatsama.github.io/vue-slider-component/

# github地址
https://github.com/NightCatSama/vue-slider-component

好了，就介绍到这里。如果小伙伴们有其他Vue区块选择器，欢迎留言一起交流讨论。

{
 path: '/slider',
 name: 'slider',
 component: ()=> import('./views/Slider.vue')
 }

<a href="javascript：void(0)" @click="$router.push('/slider')">
 <van-col span="6" class="marb20">
 <van-icon name="gift" />
 <div>Slider 滑块</div>
 </van-col>
</a>

<van-slider
 v-model="value"
 @change="onChange"
/>
data() {
 return {
 value: 30,
 }
},
methods: {
 onChange(value) {
 console.log(value)
 }, 
}

<van-slider
 v-model="value"
 :min="50"
 :max="80"
 @change="onChange"
 />

<van-slider
 v-model="value"
 :step="20"
 bar-height="6px"
 @change="onChange"
/>

网页设计中，内容滑块（Content Slider）是一个非常有用的工具，它可以突出显示图像、传递信息、用动画元素吸引用户。在网页主页上，内容滑块可以在有限的空间内传递大量信息。

下文是用于显示图像、视频或HTML内容的滑块工具清单。有一些标准的内容滑块工具可以自定义主题、动画和样式元素,还有一些可选的滑块工具能够以有趣的方式显示图像。所有这些内容滑块都是免费的，但也有一些提供升级的付费版本。

1、Zoom Slider（缩放滑块）

Zoom Slider是具有缩放功能的简单内容滑块。每张幻灯片都有一个预定义的缩放区域，用于计算全屏幕填充的适当缩放值。单击缩放图标后，缩放区域和页面将被缩放，从而产生查看者正在接近该项目的错觉。

2、Elastic Content Slider（弹性内容滑块）

Elastic Content Slider是一个简单且响应迅速的jQuery内容滑块。它有一个用于内容的滑块区域，底部有一个类似于标签的导航。每个列表项都是一张幻灯片，在导航中具有相应的链接元素。

3、Turntable

Turntable是一个响应式的jQuery滑块，当你的鼠标或手指滑过时它可以在一系列图像中旋转，类似于用JavaScript制作的数字翻页本。你所需要的只是一组图像和jQuery。

4、Nivo Slider

Nivo Slider是一个受欢迎的内容滑块，有超过120万个网站使用。它具有独立的jQuery版本和WordPress插件。Nivo Slider提供了一系列现成的主题和图像过渡效果。你可以自定义要在单个幻灯片上展示的内容。

5、FlexSlider

FlexSlider是WooCommerce的响应式jQuery滑块工具包。支持所有主流浏览器，它提供水平和垂直幻灯片、淡入淡出动画、自定义导航选项、支持触摸滑块。

6、Glide

Glide是JavaScript ES6滑块。它轻量、灵活、快速且可滑动。插入模块时可以获取附加功能。

7、bxSlider

bxSlider是一个响应式jQuery内容滑块。它具有水平、垂直、淡入淡出模式以及许多配置选项。幻灯片可以包含图像、视频或HTML内容。

8、Owl Carousel

Owl Carousel是支持触摸的jQuery插件，它可以为移动浏览创建响应式的轮播滑块。具有60多种自定义选项，各种用户都适用。Owl Carousel支持模块化插件结构，可删除不必要的插件或创建新的插件。

9、ajSlider

ajSlider是一个幻灯片jQuery插件，适合作为网页或图库的主横幅。根据你的需要设置滑块的高度和宽度，让它根据图像自动计算尺寸。另外，你还可启用或禁用自动幻灯片放映操作。

10、jcSlider

jcSlider是一个响应式滑块jQuery插件，带有CSS动画(而不是jQuery)，可以最大限度地提高性能。它反应灵敏，具有60多种效果。

11、Unslider

Unslider是一个轻量级、响应迅速的jQuery滑块。可以根据需要更改、添加和删除每个幻灯片中的CSS。Unslider是轻量级的滑块，但它提供了一系列的选项，如动画速度和延迟。

12.Tiny Circleslider

Tiny Circleslider是一种轻便的圆形轮播滑块。它为开发人员提供了标准轮播的独特替代方案。可以将间隔设置为自动滑块。

13、Smart Slider

Smart Slider是WordPress和Joomla的免费插件。创建精美的滑块和内容时无需任何代码，你可从空白滑块开始，或者从各种模板中选择。使用图层可增强滑块。

通过选择标题、文本、图像、按钮或视频并应用自定义选项，可以进行编辑。只需单击几下，即可添加YouTube和Vimeo视频为图层。

14、RoyalSlider

RoyalSlider是图片库和内容滑块插件，具有jQuery和WordPress版本。每个滑块模板都具有响应性和触摸友好性。它提供了50多个可定制选项、4个皮肤、9个模板、视频支持等等。RoyalSlider经常被应用在流行的品牌和组织网站上，如Diesel、Peugeot、Audi、Twitch、Ralph Lauren和NYC.gov。

15.Jssor

Jssor是具有200多种幻灯片效果的触摸滑块式图像轮播。Jssor Slider响应迅速并针对移动浏览器进行了优化。它提供jQuery和无jQuery版本，并具有幻灯片和字幕幻灯片动画。另外，它还有一个收费版本，每年15美元。

16、Master Slider

Master Slider是WordPress的免费插件，响应式图像和视频滑块。它支持触摸导航，带有8个入门模板、6个交互转换、定时器和用户界面控件、循环和线性滑块等等。

（编译/雨果网 吕晓琳）

【特别声明】未经许可同意，任何个人或组织不得复制、转载、或以其他方式使用本网站内容。转载请联系：editor@cifnews.com

上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！