lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-11-24 08:33:12 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix(slider): 优化提示条的箭头样式 (#2849)

Browse Source
This commit is contained in:
贤心
2025-10-09 23:55:21 +08:00
committed by GitHub
parent 03bcdca4cf
commit 29cbad142f
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/layui.css
View File

@@ -1632,7 +1632,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-slider-wrap-btn.layui-slider-hover{transform: scale(1.2);} .layui-slider-wrap-btn.layui-slider-hover{transform: scale(1.2);}
.layui-slider-wrap-btn.layui-disabled:hover{transform: scale(1) !important;} .layui-slider-wrap-btn.layui-disabled:hover{transform: scale(1) !important;}
.layui-slider-tips{position: absolute; top: -42px; z-index: 77777777; white-space:nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;} .layui-slider-tips{position: absolute; top: -42px; z-index: 77777777; white-space:nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
.layui-slider-tips:after{content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;} .layui-slider-tips:after{content: ""; position: absolute; bottom: -11px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;}
.layui-slider-input{width: 70px; height: 32px; border: 1px solid #eee; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -14px; box-sizing: border-box;} .layui-slider-input{width: 70px; height: 32px; border: 1px solid #eee; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -14px; box-sizing: border-box;}
.layui-slider-input-btn{position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee;} .layui-slider-input-btn{position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee;}
.layui-slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center; color: #999;} .layui-slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center; color: #999;}

28
src/modules/slider.js
View File

@@ -2,7 +2,7 @@
* slider 滑块组件 * slider 滑块组件
*/ */
layui.define(['component', 'jquery', 'lay'], function(exports) { layui.define('component', function(exports) {
'use strict'; 'use strict';
var $ = layui.$; var $ = layui.$;
@@ -11,19 +11,19 @@ layui.define(['component', 'jquery', 'lay'], function(exports) {
var component = layui.component({ var component = layui.component({
name: 'slider', name: 'slider',
config: { config: {
type: 'default', //滑块类型，垂直：vertical type: 'default', // 滑块类型，垂直：vertical
min: 0, //最小值 min: 0, // 最小值
max: 100, //最大值，默认100 max: 100, // 最大值，默认100
value: 0, //初始值，默认为0 value: 0, // 初始值，默认为0
step: 1, //间隔值 step: 1, // 间隔值
showstep: false, //间隔点开启 showstep: false, // 间隔点开启
tips: true, //文字提示，开启 tips: true, // 文字提示，开启
tipsAlways: false, //文字提示，始终开启 tipsAlways: false, // 文字提示，始终开启
input: false, //输入框，关闭 input: false, // 输入框，关闭
range: false, //范围选择，与输入框不能同时开启，默认关闭 range: false, // 范围选择，与输入框不能同时开启，默认关闭
height: 200, //配合 type:"vertical" 使用，默认200px height: 200, // 配合 type:"vertical" 使用，默认200px
disabled: false, //滑块禁用，默认关闭 disabled: false, // 滑块禁用，默认关闭
theme: '#16baaa' //主题颜色 theme: '#16baaa' // 主题颜色
}, },
CONST: { CONST: {
ELEM_VIEW: 'layui-slider', ELEM_VIEW: 'layui-slider',