feat(VSlider): add variant "pill" to align with MD3

[J-Sek]

• add new prop "variant" with value "pill" to apply MD3 styles
• verify and clear TODO for indexFromEnd in VSliderTrack.tsx
• new styles for thumb label
• verify/fix ticks

Markup:

<template>
  <v-app theme="dark">
    <v-container max-width="800">
      <h3 class="mb-2">Default slider</h3>
      <div class="d-flex ga-6">
        <v-radio-group v-model="size1" hide-details inline>
          <v-radio v-for="s in sizes" :key="s" :label="s.label" :value="s.value" />
        </v-radio-group>
        <v-radio-group v-model="dir1" class="mb-4" hide-details inline>
          <v-radio label="horizontal" value="horizontal" />
          <v-radio label="vertical" value="vertical" />
        </v-radio-group>
      </div>
      <v-row>
        <v-col v-for="v in [20, 40, 60, 80]" :key="v" cols="3">
          <v-slider :direction="dir1" :model-value="v" :track-size="size1" color="primary" variant="pill" />
        </v-col>
      </v-row>

      <h3 class="mb-2 mt-8">Range slider</h3>
      <div class="d-flex ga-6">
        <v-radio-group v-model="size3" hide-details inline>
          <v-radio v-for="s in sizes" :key="s" :label="s.label" :value="s.value" />
        </v-radio-group>
        <v-radio-group v-model="dir3" class="mb-4" hide-details inline>
          <v-radio label="horizontal" value="horizontal" />
          <v-radio label="vertical" value="vertical" />
        </v-radio-group>
      </div>
      <v-row>
        <v-col v-for="(r, i) in ranges" :key="i" cols="6">
          <v-range-slider :direction="dir3" :model-value="r" :track-size="size3" color="primary" variant="pill" />
        </v-col>
      </v-row>

      <h3 class="mb-2 mt-8">Default variant (unchanged)</h3>
      <v-slider :model-value="50" color="primary" thumb-label />
    </v-container>
  </v-app>
</template>

<script setup>
  import { shallowRef } from 'vue'

  const sizes = [
    { label: 'tiny', value: 16 },
    { label: 'small', value: 24 },
    { label: 'medium', value: 40 },
    { label: 'large', value: 56 },
    { label: 'extra', value: 96 },
  ]

  const size1 = shallowRef(16)
  const dir1 = shallowRef('horizontal')
  const size2 = shallowRef(16)
  const dir2 = shallowRef('horizontal')
  const size3 = shallowRef(16)
  const dir3 = shallowRef('horizontal')
  const ranges = [[10, 40], [30, 70]]
</script>