Barre de défilement de plage à double curseurs

Bonjour à toutes et à tous,

Si l'une ou l'un d'entre vous arrive à résoudre mon problème, chapeau l'artiste^^

Je personnalise une Barre de défilement de plage de prix à double curseurs.

Comme vous le verrez grâce aux codes joints, le prix est dans les curseurs MAIS le texte du prix affiché dans les curseurs rend le curseur non sélectionnable. C'est fâcheux. Je ne souhaite pas sortir le texte des curseurs.

D'où ma question : Comment rendre le texte dans les curseurs non sélectionnable ? OU Comment confondre le texte et le curseur ?

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Double Range Example</title>
    <link rel="stylesheet" type="text/css" href="doubleRange.css"/>
</head>
<body>

    <form>
        <div id="doubleRange" class="doubleRange">
            <div class="barre">
                <div class="barreMilieu" style="width:50%; left:25%;"></div>
                <div class="t1 thumb" style="left:25%"><span class="labelMin"><input type="hidden" name="pmin" value="" class="inputMin"/></div><!--Curseur 1-->
                <div class="t2 thumb" style="left:75%;"><span class="labelMax" data-unselectable="unselectable content"><input type="hidden" name="pmax" value="" class="inputMax"/></div><!--Curseur 2-->
            </div>      
            
        </div>
    </form>

    <script type="text/javascript" src="doubleRange.js"></script>
    <script type="text/javascript">
        setDoubleRange({
            element: '#doubleRange',
            minValue: 200,
            maxValue: 6000,
            maxInfinite: false,
            stepValue: 50,
	    defaultMinValue: 200,
	    defaultMaxValue: 6000,
            unite: '€'
        });
    </script>
</body>
</html>

CSS

.doubleRange /*Dimensionnement et positionnement de la barre entière*/
{ width:100%; margin:10px 0; padding-top:13px; }
.doubleRange .barre /*Dimensionnement, positionnement et style de la barre de fond*/
{ width:100%; height:6px; background-color:grey; border-radius:3px; position:relative; cursor: pointer;}
.doubleRange .barre .barreMilieu /*Dimensionnement, positionnement et style de la barre de prix*/
{ height:6px; background-color:#bb6f58; position:absolute; cursor: pointer;}
.doubleRange .barre .thumb /*Style et positionnement des curseurs*/
{ width:80px; height:30px; background-color:white; border:1px solid grey; border-radius:10%; top:-13px; position:absolute; cursor:pointer; transform:translateX(-13px); text-align: center; font-size: 26px; }
.doubleRange .barre .thumb:hover {background-color:#bb6f58;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  -o-user-select: none;
  user-select: none; /* Trop récent, mais dans le futur, il seras universel, donc gardez le en poche */
}
.doubleRange .barre .thumb::before{
  content: attr(data-unselectable);
}

function setDoubleRange(configDoubleRange)

{

//Configuration du mobule :

var classOrIDDoubleRange = configDoubleRange.element;

var minValue = configDoubleRange.minValue;

var maxValue = configDoubleRange.maxValue;

var maxInfinite = configDoubleRange.maxInfinite;

var stepValue = configDoubleRange.stepValue;

var unite = configDoubleRange.unite;

var defaultMinValue = configDoubleRange.defaultMinValue;

var defaultMaxValue = configDoubleRange.defaultMaxValue;

var doubleRange = document.querySelector(classOrIDDoubleRange);

var barre = doubleRange.querySelector('.barre');

var barreMilieu = doubleRange.querySelector('.barreMilieu');

var thumb1 = doubleRange.querySelector('.t1');

var thumb2 = doubleRange.querySelector('.t2');

var draggable = false;

var targetToMove = false;

var largeurBarre = barre.scrollWidth;

var margeLeftBarre = barre.getBoundingClientRect().left;

//Le mousemove est détecté sur la div contenant tout le double range pour éviter les pertes de suivis si la souris sort du thumb

//Detection de la souris pour les ordinateurs :

thumb1.addEventListener("mousedown", dragStart, false);

thumb2.addEventListener("mousedown", dragStart, false);

doubleRange.addEventListener("mousemove", drag, false);

doubleRange.addEventListener("mousedown", clickBar, false);

document.addEventListener("mouseup", dragStop, false);

//Detection du tactile pour les téléphone/tablettes... :

thumb1.addEventListener("touchstart", dragStart, false);

thumb2.addEventListener("touchstart", dragStart, false);

doubleRange.addEventListener("touchmove", drag, false);

doubleRange.addEventListener("touchstart", clickBar, false);

document.addEventListener("touchend", dragStop, false);

setDefaultValues();

function dragStart(e){ draggable = true; targetToMove = e.target.className.split(' ')[0]; largeurBarre = barre.scrollWidth; margeLeftBarre = barre.getBoundingClientRect().left; }

function dragStop(){ draggable = false; targetToMove = false; }

function drag(e)

{

if(draggable && targetToMove != false)

{

var thumbToMove = doubleRange.querySelector('.'+targetToMove);

//Detection de la position X de la souris :

var x = e.clientX;

//Detection de la position X pour le tactile :

if(e.type === 'touchmove'){ x = e.touches[0].clientX; }

var pourcentage = ((x-margeLeftBarre)*100)/largeurBarre;

if(pourcentage <= 0 || pourcentage >= 100){ return false; }

//Déplacement du thumb :

thumbToMove.style.left = pourcentage+'%';

//Mise à jour de la barre du milieu et des labels :

majBarreMilieuETLabels();

}

}

function clickBar(e)

{

//Detection de la position X de la souris :

var x = e.clientX;

//Detection de la position X pour le tactile :

if(e.type === 'touchmove'){ x = e.touches[0].clientX; }

var pourcentage = ((x-margeLeftBarre)*100)/largeurBarre;

//Detection du thumb le plus proche :

var percentThumb1 = parseInt(thumb1.style.left);

var percentThumb2 = parseInt(thumb2.style.left);

if(Math.abs(percentThumb1-pourcentage) <= Math.abs(percentThumb2-pourcentage))

{

thumb1.style.left = pourcentage+'%';

}

else

{

thumb2.style.left = pourcentage+'%';

}

//Mise à jour de la barre du milieu et des labels :

majBarreMilieuETLabels();

}

function setDefaultValues()

{

if(typeof defaultMinValue === 'undefined' || typeof defaultMaxValue === 'undefined'){ return false; }

if(defaultMinValue < minValue || defaultMinValue > maxValue || defaultMaxValue < minValue || defaultMaxValue > maxValue){ return false; }

thumb1.style.left = convertionValueToPercent(defaultMinValue)+'%';

thumb2.style.left = convertionValueToPercent(defaultMaxValue)+'%';

majBarreMilieuETLabels();

}

function majBarreMilieuETLabels()

{

var pourcentageT1 = parseFloat(thumb1.style.left);

var pourcentageT2 = parseFloat(thumb2.style.left);

var labelMin = doubleRange.querySelector('.labelMin');

var labelMax = doubleRange.querySelector('.labelMax');

var inputMin = doubleRange.querySelector('.inputMin');

var inputMax = doubleRange.querySelector('.inputMax');

//Detection du pourcentage le plus petit et le plus grand, car les thumbs peuvent se croiser :

var pourcentageMin = pourcentageMax = 0;

if(pourcentageT1 <= pourcentageT2){ pourcentageMin = pourcentageT1; pourcentageMax = pourcentageT2; }

else{ pourcentageMin = pourcentageT2; pourcentageMax = pourcentageT1; }

//Mise à jour de la position de la barre du milieu

barreMilieu.style.left = pourcentageMin+'%';

barreMilieu.style.width = (pourcentageMax-pourcentageMin)+'%';

//Mise à jour des labels :

labelMin.textContent = convertionPercentToValue(pourcentageMin);

labelMax.textContent = convertionPercentToValue(pourcentageMax);

//Mise à jour des inputs :

inputMin.value = convertionPercentToValue(pourcentageMin, false);

inputMax.value = convertionPercentToValue(pourcentageMax, false);

//Gestion du maxInfinite (remplace la valeur du max par l'infini) :

if(pourcentageMax > 99 && maxInfinite == true){ labelMax.textContent = '∞'; inputMax.value = ''; }

}

function convertionPercentToValue(pourcentage, afficherUnite = true)

{

//Converti le pourcentage en valeur par rapport au minValue et maxValue :

var resPFV = ((pourcentage*(maxValue-minValue))/100)+minValue;

//Arrondie la valeur par rapport au chiffre stepValue :

resPFV = Math.round(resPFV/stepValue)*stepValue;

//Ajoute l'unité :

if(afficherUnite){ resPFV = resPFV+' '+unite; }

return resPFV;

}

function convertionValueToPercent(value)

{

var resPercent = ((value-minValue)*100)/(maxValue-minValue);

return resPercent;

}

}

-
Edité par DavidArboin 31 décembre 2021 à 11:09:06

Comment rendre le texte dans les curseurs non sélectionnable ?

Barre de défilement de plage à double curseurs

Supprimer

Modérer

Signaler le message aux modérateurs