uniapp 修改slider组件vue3

官方slider组件slider
发现不能自定义slider的高度与背景色
插件地址:插件
效果图：

组件代码：

<template>
	<view class="contentBox">
		<view :style="sliderStyle">
			<slider 
				style="margin: 0;"
				:height="height"
				:selectBgColor="selectBgColor"
				:showBlock="showBlock"
				:min="min" 
				:max="max" 
				:step="step" 
				:value="value" 
				:activeColor="activeColor"
				:inactiveColor="inactiveColor" 
				:blockSize="blockSize" 
				:blockColor="blockColor"
				:showValue="showValue" 
				:disabled="disabled" 
				@changing="changingHandler" 
				@change="changeHandler" />
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	let emit = defineEmits(['changing','input','change'])
	//可自行修改默认值
	const props = defineProps({
		//高度
		height: {
			type: String,
			default: '4rpx'
		},
		// 背景色
		selectBgColor: {
			type: String,
			default: ''
		},
		//是否显示滑块
		showBlock:{
			type: Boolean,
			default:true
		},
		// 最小可选值
		min: {
			type: [Number, String],
			default: 0
		},
		// 最大可选值
		max: {
			type: [Number, String],
			default: 10
		},
		// 步长，取值必须大于 0，并且可被(max - min)整除
		step: {
			type: [Number, String],
			default: 1
		},
		// 当前取值
		value: {
			type: [Number, String],
			default: 0
		},
		// 滑块右侧已选择部分的背景色
		activeColor: {
			type: String,
			default: '#55aaff'
		},
		// 滑块左侧未选择部分的背景色
		inactiveColor: {
			type: String,
			default: '#55557f'
		},
		// 滑块的大小，取值范围为 12 - 28
		blockSize: {
			type: [Number, String],
			default: 20
		},
		// 滑块的颜色
		blockColor: {
			type: String,
			default: '#0055ff'
		},
		// 禁用状态
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否显示当前的选择值
		showValue: {
			type: Boolean,
			default: true
		}
	})
	
	let sliderStyle = ref('')
	
	onMounted(()=>{
		let sBlock=props.showBlock==false?'none !important':''
		sliderStyle.value = `--sHeight:${props.height};--sBgColor:${props.selectBgColor};--sBlock:${sBlock}`
	})
	
	const changingHandler = (e)=>{
		const {
			value
		} = e.detail
		// 更新v-model的值
		emit('input', value)
		// 触发事件
		emit('changing', value)
	}
	
	const changeHandler = (e)=>{
		const {
			value
		} = e.detail
		// 更新v-model的值
		emit('input', value)
		// 触发事件
		emit('change', value)
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-slider-handle-wrapper {
		height: var(--sHeight) !important;
	}

	::v-deep .wx-slider-handle-wrapper {
		height: var(--sHeight) !important;
	}

	::v-deep .uni-slider-thumb{
		display: var(--sBlock);
	}
	::v-deep .wx-slider-thumb{
		display: var(--sBlock);
	}

	::v-deep .uni-slider-track {
		background-image: var(--sBgColor) !important;
	}

	::v-deep .wx-slider-track {
		background-image: var(--sBgColor) !important;
	}
</style>

通俗易懂，就是在官方的基础上加了几个props，然后通过值来修改官方组件的样式来达到需求
导入组件：

可自行修改传值方式