uniapp 修改slider组件的高度与背景色(渐变)

实现效果

<view style="width: 100%;">
	<slider :value="10"></slider>
</view>

关键css

	//修改slider高度
	/deep/ .uni-slider-handle-wrapper {
		height: 14rpx !important;
	}
	//修改slider选中的背景色
	/deep/ .uni-slider-track {
		background-image: linear-gradient(to right,#6cd0ca,#133fce) !important;
	}

也可以通过组件的形式，动态的给slider设置高度与背景色

在props中

height: {
		type: String,
		default: '4rpx'
},
selectBgColor: {
		type: String,
		default: ''
},

这里结合了css的var，可自行百度了解一下var

created() {
	this.sliderStyle = `--sHeight:${this.height};--sBgColor:${this.selectBgColor};`
},

最后在css中

/deep/ .uni-slider-handle-wrapper {
		height: var(--sHeight) !important;
}
/deep/ .uni-slider-track {
		background-image: var(--sBgColor) !important;
}

注意如果是微信小程序的话需要添加 options: { styleIsolation: ‘shared’ }，并且需要将样式的uni改为wx

/deep/ .wx-slider-handle-wrapper {
		height: var(--sHeight) !important;
}
/deep/ .wx-slider-track {
		background-image: var(--sBgColor) !important;
}