jnpf-app-vue3-v6x/components/Jnpf/Slider/index.vue

<template>
	<u-slider class="jnpf-slider" :class="{'jnpf-slider-disabled':disabled}" v-model="innerValue" :step="step"
		:min="min" :max="max" :disabled="disabled" @end="end">
		<view class="slider-badge-button" :class="{'disabled':disabled}">{{innerValue}}</view>
	</u-slider>
</template>
<script>
	export default {
		name: 'jnpf-slider',
		props: {
			modelValue: {
				type: [Number, String],
				default: 0
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 100
			},
			step: {
				type: Number,
				default: 1
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				innerValue: 0
			}
		},
		watch: {
			modelValue: {
				handler(val) {
					this.innerValue = val
				},
				immediate: true,
				deep: true
			},
			innerValue: {
				handler(val) {
					this.$emit('update:modelValue', val)
					this.$emit('change', val)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			end() {
				this.$emit('update:modelValue', this.innerValue)
				this.$emit('change', this.innerValue)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.jnpf-slider {
		width: 100%;

		.slider-badge-button {
			padding: 4rpx 6rpx;
			background-color: $u-type-primary;
			color: #fff;
			border-radius: 10rpx;
			font-size: 22rpx;
			line-height: 1;

			&.disabled {
				background-color: #E6E6E6 !important;
				color: #9B9B9B !important;
			}
		}

		&.jnpf-slider-disabled {
			:deep(.u-slider__gap) {
				background-color: #E6E6E6 !important;
				border-color: #D9D9D9 !important;
			}
		}
	}
</style>