Label of input slider (v-slider) deadzone

Tengo un slider de entrada, o como se refiere por vuetify. He logrado sobre todo lo que quiero consiguiendo etiquetas sobre el deslizador, pero el problema es que las etiquetas "producto" y "rating" crean una "zona muerta" donde si hago clic en el deslizador, no va al área sobre las etiquetas, tengo que deslizarlo allí.

Es difícil de explicar. Pruebe haciendo clic en el slider en el ejemplo y luego haga clic en "car" o "stove". Verás que el deslizador tiene que ser arrastrado a él.

enter image description here

Marcos.


    
        
    
    
{{product.label}}

    
{{product.rating}}%

CSS

.v-slider__track-container {
  height: 42px !important;
}

.v-slider__thumb {
  width: 60px;
  height: 40px;
  left: -30px;
}
.work {
  position: relative;
}
.product {
  
  -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;


  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.range {

  -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
  position: absolute;

  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%);
}

.active {
  color: white;
}

Aquí está mi ejemplo de codepen.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por daniel1

2 Respuestas:

  • Para resolver el problema de la "zona muerta" al hacer clic en las etiquetas "producto" y "rating" sobre el deslizador, puedes mover esas etiquetas fuera del contenedor del v-slider para evitar interferir con la interacción del deslizador. Aquí te muestro cómo modificar tu código:

    html

    
    
    {{product.label}}
    
    
    {{product.rating}}%

    Al mover las etiquetas fuera del v-slider container, ahora deberías poder hacer clic directamente en el deslizador sin problemas en las áreas donde estaban las etiquetas.

    Espero que esta solución resuelva tu problema. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 06:14 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para resolver el problema de la "zona muerta" en tu control deslizante Vuetify, puedes utilizar el siguiente enfoque:

    1. Añade un Event Listener al Slider

    Añade un event listener click al elemento del slider para capturar los clics:

    html

    2. Implementa el Event Handler

    Define un método en tu componente Vue para manejar el evento click:

    javascript
methods: {
  sliderClick(e) {
    // Tu código aquí
  }
}

    3. Calcula la Posición Relativa del Clic

    Dentro del método sliderClick, calcula la posición relativa del clic dentro del slider:

    javascript
const rect = e.target.getBoundingClientRect();
const clickX = e.clientX - rect.left;

    4. Determina el Valor del Slider

    Utiliza la posición relativa del clic para determinar el valor correspondiente del slider:

    javascript
const value = (clickX / rect.width)  (this.max - this.min) + this.min;

    5. Actualiza el Modelo

    Actualiza el valor del modelo del slider utilizando el valor calculado:

    javascript
this.product.intensity = value;

    Ejemplo de Código

    Aquí tienes un ejemplo completo del código modificado:

    html


    javascript
methods: {
  sliderClick(e) {
    const rect = e.target.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const value = (clickX / rect.width)  (this.max - this.min) + this.min;
    this.product.intensity = value;
  }
}

    Con este enfoque, podrás hacer clic en cualquier parte del slider, incluidas las zonas ocupadas por las etiquetas, para actualizar el valor del slider correctamente.

    Respondida el Dec 18, 2020 a las 06:24 - por Gemini

    Votos positivos: 0 | Votos negativos: 0