Vue ElementUI el-slider 带输入框（两种样式）

AvatarGiser

已于 2022-01-20 13:55:45 修改

阅读量2.5k

点赞数

分类专栏：《ElementUI 基础知识》文章标签： vue.js elementui javascript

于 2022-01-20 13:47:54 首次发布

本文链接：https://blog.csdn.net/sinat_31213021/article/details/122598586

版权

《ElementUI 基础知识》专栏收录该内容

36 篇文章

订阅专栏

以前还傻乎乎...的自己写 input，然后和 slider 关联。Element ui 已支持！

API

el-slider 提供属性 show-input 和 show-input-controls

注意：在 show-input 为 true 时，show-input-controls 的设置才有效。

代码

<!-- 带控制按钮 -->
<el-slider style="width:350px" v-model="value" show-input ></el-slider>
<!-- 不带控制按钮 -->
<el-slider style="width:350px" v-model="value" show-input :show-input-controls="false"></el-slider>

效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AvatarGiser

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Element UI slider 输入框控制范围滑块

qq_43150721的博客

07-05

687

遇到一个需求，涉及到for循环展示slider，且每一个slider支持手输值控制滑块展示。

vue+Ant Design进度条滑块与input联动

周家大小姐

12-07

827

需求:滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100 子组件: 父组件使用

参与评论您还未登录，请先登录后发表或查看评论

el-slider__input

weixin_35756690的博客

12-19

343

el-slider__input 是一个 CSS 类名，表示这是一个输入框，用于控制滑块组件(slider)的值。它通常是滑块组件的一部分，与滑块组件的其他元素(如滑块按钮、刻度标记、标签等)一起使用。使用这个 CSS 类名可以为输入框定义特定的样式，以便让它在滑块组件中更好看。 ...

Element UI中防止赋值触发el-slider的input事件

我好菜啊

12-14

2221

滑块在被代码赋值的情况下不能触发input效果，在鼠标拖拉的情况下触发input效果

灵活的VueJS输入控件可进行评级

cuk5340的博客

07-24

260

vuejs video控件电视明星 (vue-stars) Flexible VueJS input control for ratings (stars, etc.) 灵活的VueJS输入控件，用于收视率(星级等) View demo 查看演示 Download Source 下载源物产 (Properties) The following properties are sup...

Input Controls（输入控件）

莫高雷草原

04-18

2005

输入控件输入控件是应用中用户界面的一种交互式组件。Android提供了大量的可供在UI中使用的控件，例如按钮、文本框、滑块进度条、复选框、缩放按钮和开关按钮等等。在UI中添加输入控件就像在 XML layout 中添加XML元素一样简单。例如，下面是一个带有文本框和按钮的布局： xml version="1.0" encoding="utf-8"?> xmlns:andro

vue3+ts 自定义el-slider，原点显示数字

qq_45287575的博客

02-15

1115

vue3+ts+scss+elementPlus 实现自定义滑块

Element中Slider滑块的具体使用

10-15

### 六、带有输入框 当需要用户手动输入值时，可以使用 `show-input` 属性： ```html <el-slider v-model="value" show-input></el-slider> ``` ### 七、范围选择要创建一个选择范围的滑块，可以使用 `range` ...

【区分vue2和vue3下的element UI Slider 滑块组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

06-05

907

Element UI 是一个基于 Vue 的组件库，但需要注意的是，Element UI 本身并没有为 Vue 3 提供官方的支持版本。虽然社区中存在一些针对 Vue 3 的 Element UI 类似库（如 Element Plus），但官方的 Element UI 主要针对 Vue 2。不过，我可以为你分别介绍 Vue 2 下 Element UI 的 Slider 滑块组件的属性、事件和方法，以及 Vue 3 下可能的替代方案（如 Element Plus）中的类似组件。

验证规则集合可用于vue-element-ui中的rules

06-29

Vue-element-ui便是基于Vue.js的一个组件库，它包含了各种各样的UI组件，其中就包括表单组件。在Vue-element-ui中，`rules`属性被用来定义表单验证的规则。标题"验证规则集合可用于vue-element-ui中的rules"意味着...

custom-slider:自定义滑块

03-09

自定义滑块埃斯特上课联合国PROYECTO去实习课阙他realizado科莫inspiración人版本视频去胡安·安德烈斯·恩。实践技术的实践经验禁止在公共场所发信给任何未成年人的问题。 Tecnologíasempleadas HTML（con el模板） CSS（con el prepocesador ） JS 演示版 Prúebalo Una vez clonado el repo，basta con que instales lasdependencias lanzando el comando npm install 一个持续改进的方式（包括人力资源管理，错误报告等） quasar dev 产地协议书 quasar build

elementUI slider单向进度条

qq_36801966的博客

07-07

1721

文章目录1. 主页面2. 进度条组件前端框架使用vue + element ui ,故选用element ui 组件中的进度条 Element组件地址 1. 主页面 <template> <div class=""> <div class="content-hd"> <h2>单向进度条</h2> </div> <div class="content-

vue自定义指令——input输入类型限制（数字、浮点、整数、英文等），解决中文输入法双向绑定失效问题

coldriversnow的专栏

07-05

5025

实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等一、基本步骤以element,el-input组件为例：1.在自定义指钩子函数bind或inserted通过querySelector找到输入框（input标签）dom对象2.监听input的onkeyup事件，获取输入值，校验并替换输入值，限制输入类型，重新给输入框设值。

【vue+elementUI】输入框样式、选择器样式、树形选择器和下拉框样式修改

栀妹儿的炼丹炉

09-19

3310

【代码】【vue+elementUI】输入框样式、选择器样式和下拉框样式修改。

微信小程序——input输入框的使用、slider组件

Tracy_ning的博客

06-20

1015

slider组件是通常是滑动选择器，通常情况下，手机操作滑动选择器远比直接进行数值输入的好。以下是代码 a.js changeSize:function(e){ this.data.icon.size = e.detail.value; this.setData(this.data); }, changeOpacity:function(e){ this.data.icon.opacity = e.detail.value; this.setData(this.data); } 这段是直

Vue3滑动输入条（Slider）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

04-06

7083

数字滑动输入条组件，支持：单滑块；双滑块；禁用；自定义数值范围；自定义步长；自定义刻度标记；垂直模式；格式化 tooltip；隐藏 tooltip；始终显示 tooltip；自定义样式；鼠标拖动滑块输入；鼠标点击输入；键盘上/下/左/右按键输入；总之，功能丰富，简单易用😁😁

el-slider修改输入框的宽度

weixin_35755188的博客

12-19

603

可以使用 style 属性来修改 el-slider 组件内部的输入框的宽度。例如： <template> <el-slider v-model="value" style="width: 300px;"> </el-slider> </template> <script> export default { data() ...

ElementUI给表格加上输入框和单位

有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我

02-25

2051

关键代码（可以使用判断的语句进行判断添加）： <el-input v-model="dataList[scope.$index].ruleCon" placeholder="输入" > <template v-if="scope.$index % 2 == 0" slot="append" >%</template

elementui中禁止输入框，限制输入

m0_48390697的博客

11-01

3005

这个是只允许用户输入数字，原理是把输入的非数字字符换成空格，需要的话可以根据需求替换正则表达式即可。有些时候再做表单验证的时候，只用正则表达式限制效果不好，为了不让用户输入某些符合，需要禁止输入。也可以换成onKeyUp事件，逻辑一样，效果稍微不同，感兴趣的自己尝试一下。注意type="text"属性必须写，不然识别不了。

Element UI el-slider 输入

最新发布

02-24

### Element UI `el-slider` 组件实现输入功能 #### 属性配置为了使 `el-slider` 支持通过输入框调整数值的功能，需设置特定属性。其中重要的是 `show-input` 属性，该属性允许用户直接在滑块旁边输入具体数值[^1]。 ```html <template> <div class="slider-with-input">  <el-slider v-model="value" show-input></el-slider> </div> </template> <script> export default { data() { return { value: 0, // 初始值设定为0 }; }, }; </script> ``` 此代码片段展示了如何启用 `el-slider` 的输入功能。当设置了 `show-input` 后，会在滑块右侧展示一个输入框，让用户可以直接键入想要的数值来改变滑块位置。 #### 自定义样式与交互优化对于希望进一步定制体验的情况，比如解决 Electron-Vue 中可能出现的问题（如缺少 Tooltip），可以参考社区反馈并应用相应修复措施[^2]： ```css /* 解决Electron环境下Tooltip不显示问题 */ .el-tooltip__popper.is-dark { display: block !important; } ``` 上述 CSS 片段解决了某些环境中 Tooltip 不正常工作的问题，确保即使是在特殊开发环境如 Electron 应用程序里也能正常使用带有输入功能的 Slider 组件。 #### 完整示例下面给出一个完整的 Vue 单文件组件例子，它不仅实现了基本的滑块加输入框效果，还处理了一些常见的兼容性和用户体验改进： ```html <template> <div style="margin-top: 50px;"> <h3>Slider with Input Example</h3> <p>Current Value: {{ value }}</p> <el-slider v-model="value" :min="0" :max="100" show-input @change="handleChange"></el-slider> </div> </template> <script> export default { name: 'SliderWithInput', data() { return { value: 50, } }, methods: { handleChange(newValue) { console.log(`Value changed to ${newValue}`); } } }; </script> <style scoped> /* 可选：自定义一些样式 */ .slider-with-input .el-slider__input { width: 80px; } /* 处理Electron下tooltip不可见问题 */ .el-tooltip__popper.is-dark { display: block !important; } </style> ``` 这段代码创建了一个简单的页面布局，其中包括标题、当前值显示区域以及具备输入能力的滑块控件。每当用户更改滑块的位置或手动修改输入框内的数字时都会触发相应的事件处理器函数 `handleChange()` 来记录变化。