Skip to content

Conversation

@brandonpham13
Copy link

Updated Slider.json documentation to reflect new behavior.
Modified VSliderThumb component to show label on hover and adjusted prop validation for thumbLabel.

fixes #19167

Markup:

<template>
  <v-app>
    <v-container class="pa-8">
      <h1 class="text-h4 mb-4">Slider Thumb Label Hover Demo</h1>
      <p class="text-body-1 mb-6">
        Hover over the slider thumbs to see their values.
      </p>

      <div class="mb-6">
        <v-label class="mb-2">Volume</v-label>
        <v-slider
          v-model="volume"
          min="0"
          max="100"
          thumb-label="hover"
        />
      </div>

      <div class="mb-6">
        <v-label class="mb-2">Brightness</v-label>
        <v-slider
          v-model="brightness"
          min="0"
          max="100"
          thumb-label="hover"
        />
      </div>

      <div class="mb-6">
        <v-label class="mb-2">Contrast</v-label>
        <v-slider
          v-model="contrast"
          min="0"
          max="100"
          thumb-label="hover"
        />
      </div>

      <div class="mb-6">
        <v-label class="mb-2">Saturation</v-label>
        <v-slider
          v-model="saturation"
          min="0"
          max="100"
          thumb-label="hover"
        />
      </div>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'SliderHoverDemo',
  data: () => ({
    volume: 75,
    brightness: 60,
    contrast: 80,
    saturation: 40,
  }),
}
</script>

…pdated Slider.json documentation to reflect new behavior. Modified VSliderThumb component to show label on hover and adjusted prop validation for thumbLabel.
@J-Sek
Copy link
Contributor

J-Sek commented Dec 6, 2025

It is a feature, not a fix, right? Could you change target to dev instead of master and rebase if necessary?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Show slider thumb on hover

2 participants