js自定义的滚动条:

//自定义一个开关滚动条

<script setup lang="ts">
const volume = ref(10)
const updateVolume = (val) => {
  console.log("val is:", val)
}
</script>
<template>
    <div class="volume-container">
      <div class="volume-controls">
        <span class="volume-control">-</span>
        <span class="volume-control">+</span>
      </div>
      <input
        type="range"
        min="10"
        max="20"
        v-model="volume"
        @input="updateVolume"
        class="volume-slider"
      />
    </div>
</template>
<style scoped>
.volume-container{
  max-width: 180px;
  width: 100%;
  margin: 60px auto;
}
.volume-controls{
display: flex;
justify-content: space-between;
align-items: center;
  height: 8px;
  margin-bottom: 4px;
}
.volume-slider{
max-width: 100%;
  width: 100%;
}
</style>

官方例子代码:https://github.com/advanced-cropper/vue-advanced-cropper/blob/master/example/docs/.vuepress/components/circle-example.vue