如何在 vuetify 中自定义范围滑块刻度？答案

【问题标题】：How to customize range slider tick in vuetify?如何在 vuetify 中自定义范围滑块刻度？
【发布时间】：2021-06-10 14:59:02
【问题描述】：

您好，我正在尝试在 vuetify 1.5 中自定义 v-slider 刻度以实现类似的效果，即自定义比例图标。

我尝试修改 v-slider__ticks 并通过修改边框半径属性使其看起来像比例。但是面临一个问题，它只出现在滑块下方而不是出现在中心。这是我到目前为止所尝试的。任何修复它的建议都会有所帮助。

Codepen 链接：https://codepen.io/akshayd21/pen/KKWxeWx

new Vue({
  el: '#app',
  data() {
    return {
          value: 0
    }
  }
})

.v-slider__ticks{
  border-left: 0.5px solid !important;
  height: 10px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <div>
      <v-layout>
        <v-flex>
           <v-card flat color="transparent">
      <v-subheader>Custom Range Tick</v-subheader>
  
      <v-card-text>
        <v-slider
          v-model="value"
          step="10"
          ticks="always"
          tick-labels="abcdefghijkl"
        ></v-slider>
      </v-card-text>
  
    </v-card>
  
        </v-flex>
      </v-layout>
    </div>
  </v-app>
</div>

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

您可以添加一个否定的top 值

new Vue({
  el: '#app',
  data() {
    return {
          value: 0
    }
  }
})

.v-slider__ticks{
  border-left: 0.5px solid !important;
  height: 10px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: -5px !important;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <div>
      <v-layout>
        <v-flex>
           <v-card flat color="transparent">
      <v-subheader>Custom Range Tick</v-subheader>
  
      <v-card-text>
        <v-slider
          v-model="value"
          step="10"
          ticks="always"
          tick-labels="abcdefghijkl"
        ></v-slider>
      </v-card-text>
  
    </v-card>
  
        </v-flex>
      </v-layout>
    </div>
  </v-app>
</div>

【讨论】：