Comment personnaliser le type de plage de saisie HTML5 en utilisant CSS?

Je souhaite personnaliser l’apparence du type d’entrée de la plage en HTML5 pour qu’elle ressemble à une barre de progression. J’ai essayé d’appliquer des atsortingbuts CSS courants en utilisant la classe CSS mais il semble qu’ils ne fonctionnent pas.

Quelqu’un peut-il me diriger comment le personnaliser?

Le est assez récent et vous essayez déjà de le personnaliser avec CSS. 🙂

Je ne voudrais pas essayer cela pour deux raisons:

  1. Il pourrait y avoir d’énormes problèmes de compatibilité maintenant et pour les prochaines années (ou plusieurs) . Pensez qu’aujourd’hui, un contrôle de formulaire tel que (disponible depuis le démarrage du Web) est toujours problématique pour être personnalisé avec CSS de manière multi-navigateur. Par exemple, si vous définissez un padding pour les zones de sélection, de nombreux navigateurs (IE7, OPERA9, CHROME5, SAFARI4) ignorent totalement le remplissage. Cela fonctionne seulement IE8 et sur FF 3.6. (tous les tests effectués avec HTML5 DOCTYPE en mode standard).

  2. Le a été créé pour montrer à un curseur PAS une barre de progression , en essayant de le tromper avec CSS afin de transformer un curseur en barre de progression. Comme essayer d’utiliser CSS pour changer un en une table, mais pourquoi ne pas simplement utiliser un

    pour rendre les tables?!

Pour afficher une barre de progression en HTML5, vous devez suivre la suggestion de Marcgg dans sa réponse. Comme aucun navigateur ne le rend actuellement, vous pouvez utiliser un simple div avec ap comme ceci:

 

 

Ensuite, mettez simplement à jour le style.width de l’élément P interne en pourcentage, comme style.width :

 width: 75% 

FYI: si vous voulez faire cela en JS simple voici le code:

 document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%'; 
 input[type='range'] { -webkit-appearance: none !important; background:red; height:7px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background:blue; height:10px; width:10px; } 

Si vous utilisez HTML 5, pourquoi ne pas utiliser la balise de progress ?

 33% 

J’ai fait une solution multi-navigateur (+ IE9, FF, Chrome, Safari), uniquement CSS.

[Mis à jour le 24.11.2016]

http://codepen.io/nlfonseca/pen/MwbovQ

 @import 'bourbon'; $slider-width-number: 240; $slider-width: #{$slider-width-number}px; $slider-height: 2px; $background-slider: #c7c7c7; $background-filled-slider: #e33d44; $thumb-width: 28px; $thumb-height: 18px; $thumb-radius: 8px; $thumb-background: #fff; $thumb-border: 1px solid #777; $shadow-size: -8px; $fit-thumb-in-slider: -8px; @function makelongshadow($color, $size) { $val: 5px 0 0 $size $color; @for $i from 6 through $slider-width-number { $val: #{$val}, #{$i}px 0 0 $size #{$color}; } @return $val; } div { height: 100px; display: flex; justify-content: center; } input { align-items: center; appearance: none; background: none; cursor: pointer; display: flex; height: 100%; min-height: 50px; overflow: hidden; width: $slider-width; &:focus { box-shadow: none; outline: none; } &::-webkit-slider-runnable-track { background: $background-filled-slider; content: ''; height: $slider-height; pointer-events: none; } &::-webkit-slider-thumb { @include size($thumb-width $thumb-height); appearance: none; background: $thumb-background; border-radius: $thumb-radius; box-shadow: makelongshadow($background-slider, $shadow-size); margin-top: $fit-thumb-in-slider; border: $thumb-border; } &::-moz-range-track { width: $slider-width; height: $slider-height; } &::-moz-range-thumb { @include size($thumb-width $thumb-height); background: $thumb-background; border-radius: $thumb-radius; border: $thumb-border; position: relative; } &::-moz-range-progress { height: $slider-height; background: $background-filled-slider; border: 0; margin-top: 0; } &::-ms-track { background: transparent; border: 0; border-color: transparent; border-radius: 0; border-width: 0; color: transparent; height: $slider-height; margin-top: 10px; width: $slider-width; } &::-ms-thumb { @include size($thumb-width $thumb-height); background: $thumb-background; border-radius: $thumb-radius; border: $thumb-border; } &::-ms-fill-lower { background: $background-filled-slider; border-radius: 0; } &::-ms-fill-upper { background: $background-slider; border-radius: 0; } &::-ms-tooltip { display: none; } } 

Vous pouvez dans Webkit, à travers le pseudo-élément -webkit-slider-thumb : http://jsfiddle.net/leaverou/BNm8j/

 input[type=range] { -webkit-appearance: none; background-color: silver; width: 200px; height:20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #666; opacity: 0.5; width: 10px; height: 26px; } 
  

Vous pouvez éditer le CSS de la plage en utilisant input[type="range"]::-webkit-slider-thumb et input[type="range"] .

En voici l’exemple,

http://webstutorial.com/range-input-slider-html5-css3/html-5

Je sais que cela a déjà été répondu mais juste en le partageant.

Les outils jQuery fournissent un plug-in qui crée des éléments stylisables à partir d’une entrée de plage, et de plus, il fonctionne toujours comme un curseur dans les navigateurs plus anciens qui ne supportent pas les input[type=range] .

Vous permet de style:

  • la poignée
  • le curseur
  • remplissage facultatif
  • champ de sortie de valeur

Je l’ai utilisé plusieurs fois et c’est un excellent outil.

ATTENTION: ne fonctionne pas sur les appareils tactiles. Je n’ai pas autant d’expérience, mais vous pouvez essayer le curseur mobile jQuery: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.github.io/demos/rangeinput/index.html

Quand j’ai regardé cette question, j’avais besoin de quelque chose de simple. Il existe déjà un certain nombre de réponses au framework sur la manière de procéder, mais il est parfois plus léger et flexible de créer les vôtres. Bien sûr, vous obtenez un certain montant gratuitement avec un framework (et c’est souvent le bon choix s’il convient), mais vous devez alors vous soucier de la compatibilité du framework, de la prise en charge et du développement du framework. en dehors de ses limites.

Voici un simple curseur javascript uniquement. Fondamentalement, il s’agit d’une img pour le curseur, d’une img pour le bouton et d’un rappel avec un pourcentage de progression. Pas un slider tout en chantant et dansant, mais quelque chose de simple à construire.

La démo

Le HTML

 

Le script

Placez dans un fichier javascript:

 (function(bb,undefined){ bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate) { var halfButtonWidth = 5; var sliderMoving = false; var buttonElement = document.getElementById(buttonCssId); var sliderElement = document.getElementById(sliderCssId); var length = sliderElement.clientWidth; var leftPos = 0; var rightPos = leftPos + length; length = rightPos - leftPos; if( initialPercentage ) { var buttonPos = leftPos + initialPercentage / 100 * length; buttonElement.style.left = buttonPos - halfButtonWidth + 'px'; } buttonElement.addEventListener( 'mousedown', function(){ sliderMoving = true; } ); document.addEventListener( 'mousemove', function(event){ if( sliderMoving == true ) { var rect = sliderElement.getBoundingClientRect(); var mouseX = event.clientX - rect.left; var prop = mouseX / length; if( prop < 0 ) { prop = 0; mouseX = 0; } if( prop > 1 ) { prop = 1; mouseX = length; } buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px'; progressUpdate(prop * 100); } }); document.addEventListener( 'mouseup', function(){ sliderMoving = false; }); } }(window.bb = window.bb || {})); 

Exemple d’utilisation

HTML:

  

Javascript:

 function sliderUpdate(percentage) { var sliderSubject = document.getElementById('bb_sliderSubject'); sliderSubject.style.width = percentage + '%'; } window.onload=function() { var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate); } 

Ceci est un exemple:

 input[type='range'] { -webkit-appearance: none; border-radius: 5px; box-shadow: inset 0 0 5px #333; background-color: #999; height: 10px; vertical-align: middle; } input[type='range']::-moz-range-track { -moz-appearance: none; border-radius: 5px; box-shadow: inset 0 0 5px #333; background-color: #999; height: 10px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; border-radius: 20px; background-color: #FFF; box-shadow:inset 0 0 10px rgba(000,000,000,0.5); border: 1px solid #999; height: 20px; width: 20px; } input[type='range']::-moz-range-thumb { -moz-appearance: none; border-radius: 20px; background-color: #FFF; box-shadow:inset 0 0 10px rgba(000,000,000,0.5); border: 1px solid #999; height: 20px; width: 20px; } 
  

Voir http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range

C’est un outil qui produit du code inter-navigateur pour styler les entrées de plage natives et de webshims comme vous le souhaitez.

 .ws-range, input[type="range"] { /* Range styles: width, height, border-radius, background */ -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0; } .ws-range .ws-range-thumb { /* Thumb styles: width, height, border, border-radius, background */ } .ws-range.ws-focus .ws-range-thumb { /* Thumb focus styles: border-color, background */ } .ws-range.ws-active .ws-range-thumb { /* Thumb active styles: border-color, background */ } .ws-range .ws-range-min { /* Thumb progress styles: display, background */ border-radius: /* same as range */; height: 100%; } input[type="range"]::-moz-range-track { border: none;background: transparent; } input[type="range"]::-ms-tooltip { display: none; } input[type="range"]::-webkit-slider-thumb { /* Thumb styles: width, height, border, border-radius, background */ -webkit-appearance: none; } input[type="range"]::-ms-track { /* Range styles: width, height, border-radius, background */ color: transparent;border: 0; } input[type="range"]::-moz-range-thumb { /* Thumb styles: width, height, border, border-radius, background */ } input[type="range"]::-ms-thumb { /* Thumb styles: width, height, border, border-radius, background */ } input[type="range"]:focus::-webkit-slider-thumb { /* Thumb focus styles: border-color, background */ } input[type="range"]:focus::-moz-range-thumb { /* Thumb focus styles: border-color, background */ } input[type="range"]:focus::-ms-thumb { /* Thumb focus styles: border-color, background */ } input[type="range"]:active::-webkit-slider-thumb { /* Thumb active styles: border-color, background */ } input[type="range"]:active::-moz-range-thumb { /* Thumb active styles: border-color, background */ } input[type="range"]:active::-ms-thumb { /* Thumb active styles: border-color, background */ } input[type="range"]::-moz-range-progress { /* Thumb progress styles: display, background */ border-radius: /* same as range */; height: 100%; } input[type="range"]::-ms-fill-lower { /* Thumb progress styles: display, background */ border-radius: /* same as range */; height: 100%; } .no-cssrangeinput input[type="range"] { background: transparent;margin: 0;border: 0;min-height: 51px; }