0

O que eu estou fazendo?

Bom, eu estou criando um controle deslizante (<input="range">) no qual você passa o mouse por cima dele e ele mostra o seu valor em uma <div>e essa <div> tem o objetivo de seguir o controle deslizante conforme o usuário movimenta ele, mas essa <div> deve seguir de uma forma bem suave, esse controle deslizante é semelhante ao do desenvolvedor @tadaima. Já o meu controle deslizante está na minha conta do CodePen.

A imagem abaixo é do controle deslizante com o seu respectivo valor dentro de uma <div>:

inserir a descrição da imagem aqui

O primeiro problema (movimento nada agradável)

A primeira coisa de errado que está acontecendo no controle deslizante é quando você o movimenta e a <div> não acompanha ele de uma forma suave, ela vai travando as vezes, caso você movimente o controle deslizante bem devagar a <div> consegue acompanhá-lo mas o intuito é se movimentar rápido ou não ela siga acompanhá-lo do mesmo jeito de uma forma suave.

O segundo problema (indo longe de mais)

O segundo problema é que ao movimentar o controle deslizante rápido para direita / esquerda a <div> vai um pouco a mais do que deveria, pois o mínimo que ela deve ir é até no começo do controle deslizante e já o máximo que ela deveria ir é até no final do controle deslizante e não um pouco a mais.

A imagem abaixo mostra a <div> indo um pouco a mais do que deveria (isso acontece quando você movimenta rápido o controle deslizante para a esquerda / direita o máximo possível):

inserir a descrição da imagem aqui

Esses dois problemas a cima no meu código são os que "eu não consigo resolver", pois já tentei de várias formas e sem resultado quem poder ajudar, agradeço muito!

NOTA: Caso, tiver algum jeito de fazer melhor o que estou fazendo, seja com JavaScript puro ou Jquery ou com qual for a tecnologia toda ajuda é bem, vinda!

1 Resposta 1

0

Para o primeiro problema no css do #ballon pode reduzir o tempo ou remover a linha:

transition: left 250ms linear;

Para o segundo problema no oninput do button control:

  1. Ficar com o ballon totalmente dentro da projeção da largura do button control, onde 250 é a largura do button control (300) menos e da largura do ballon (50):

balloon.style.left = buttonControl.value * 250 / 100 + 'px';

  1. Ficar metade do ballon na projeção da largura do button control, onde 25 é metade da largura do ballon:

balloon.style.left = buttonControl.value * 300 / 100 - 25 + 'px';

  1. Ficar centrado com a bola do button control, onde 270 é a largura do button control menos largura da bola e 10 é metade da largura da bola com a largura do ballon.

balloon.style.left = buttonControl.value * 270 / 100 - 10 + 'px';

1
  • 1
    Isso, mesmo! 😅 valeu pela ajuda!
    – user170164
    Commented 6/12/2019 às 13:12

Você deve fazer log-in para responder a esta pergunta.