<input type= "range" step= "any">Déplacement du pouce en douceur</input>

Question

J'ai configuré un input range HTML avec plusieurs changements CSS pour l'apparence, et je me demandais s'il y avait un moyen de le faire changer en douceur de l'endroit où il se trouve à l'endroit où l'utilisateur le modifie?

input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        height: 20px;
        border-radius: 5px;
        border: 1px solid;
        background: none;
        box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
        transition: 0.4s all ease-out;
        outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 30px;
        height: 30px;
        background-color: #CCC;
        border: solid 1px #333;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
        cursor: pointer;
        transition: 0.4s all ease-out;
    }

    input[type=range]:hover {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0px 0px 13px 0px #444, 0px 0px 20px 0px #444 inset;
    }

    input[type=range]:hover::-webkit-slider-thumb {
        border: solid 1px #444;
        box-shadow: 0px 0px 15px 0px #444, 0px 0px 20px 0px #444 inset;
    }

    input[type=range]:focus {
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0px 0px 18px 0px #333, 0px 0px 15px 0px #333 inset;
    }

    input[type=range]:focus::-webkit-slider-thumb {
        border: solid 1px #333;
        box-shadow: 0px 0px 22px 0px #333, 0px 0px 15px 0px #333 inset;
    }

Answer 1

Ce sont les choses qui affectent la fluidité :

1. La largeur de la bannière
2. La plage min/max
3. La taille des pas

Donc, si vous avez :

1. 1000px de largeur de plage d'entrée
2. Plage de 0 à 1000
3. Taille de pas de 1

Chaque pas ne sera que de 1px, et il sera assez fluide.

Si vous avez :

1. 1000px de largeur de plage d'entrée
2. Plage de 0 à 100
3. Taille de pas de 25

Il se fixera entre les valeurs autorisées, apparaissant moins fluide.

C'est vraiment une caractéristique de l'interaction entre la taille de votre pas et votre plage, et fournit des retours utiles à l'utilisateur sur les valeurs acceptables.