web-dev-qa-db-fra.com

Où puis-je trouver les styles Bootstrap pour les entrées de la plage HTML5?

Je suis en train de styliser un formulaire [avec Bootstrap] et j'utilise le nouveau type="range" De HTML5 pour spécifier un montant en dollars.

<input type="range" min="10" max="1000" step="10" />

Quelqu'un peut-il recommander un plugin avec des styles <input> Avec les éléments de formulaire de Bootstrap? En particulier, les entrées de plage HTML5 [ainsi qu'un élément de sortie correspondant].

Je suis surpris bootstrap n'offre pas déjà des actifs de formulaire HTML5 et je veux éviter de réinventer la roue; sauf si c'est absolument nécessaire.

Si quelqu'un pouvait m'orienter dans la bonne direction, je l'apprécierais.

html5formscss3inputtwitter-bootstrap-3
28
Wilhelm

Il n'y a pas de classe particulière dans bootstrap pour la plage de type d'entrée mais vous pouvez la personnaliser avec CSS et javascript simple. Assez cool voici un exemple pour ça!

Voir la démo ici: jsfiddle - Type d'entrée plage style

body {
  background: #2B353E;
  margin: 0;
  padding: 0;
}
#slider {
  width: 400px;
  height: 17px;
  position: relative;
  margin: 100px auto;
  background: #10171D;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
  -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
  box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
#slider .bar {
  width: 388px;
  height: 5px;
  background: #333;
  position: relative;
  top: -4px;
  left: 4px;
  background: #1d2e38;
  background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1d2e38), color-stop(50%, #2b4254), color-stop(100%, #2b4254));
  background: -webkit-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
  background: -o-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
  background: -ms-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
  background: linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1d2e38', endColorstr='#2b4254', GradientType=1);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
#slider .highlight {
  height: 2px;
  position: absolute;
  width: 388px;
  top: 6px;
  left: 6px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.25);
}
input[type="range"] {
  -webkit-appearance: none;
  background-color: black;
  height: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: 0px;
  z-index: 1;
  width: 11px;
  height: 11px;
  cursor: pointer;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebf1f6), color-stop(50%, #abd3ee), color-stop(51%, #89c3eb), color-stop(100%, #d5ebfb));
}
input[type="range"]:hover ~ #rangevalue,
input[type="range"]:active ~ #rangevalue {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  top: -75px;
}
/* Tool Tip */

#rangevalue {
  color: white;
  font-size: 10px;
  text-align: center;
  font-family: Arial, sans-serif;
  display: block;
  color: #fff;
  margin: 20px 0;
  position: relative;
  left: 44.5%;
  padding: 6px 12px;
  border: 1px solid black;
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222931), color-stop(100%, #181D21));
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  width: 18px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: -95px;
}
input[type="range"]:focus {
  outline: none;
}
<div id="slider">
  <input class="bar" type="range" id="rangeinput" value="50" onchange="rangevalue.value=value" />
  <span class="highlight"></span>
  <output id="rangevalue">50</output>
</div>
23
eirenaios

Découvrez Bootstrap Slider , c'est très "Bootstrappy" (!)

Exemples ici

Ressemble à ça:

Slider example

Avec beaucoup de personnalisation.

18
Harry