Where can I find Bootstrap styles for HTML5 Range inputs?

Question

I'm in the process of styling a form [with Bootstrap] and am using HTML5's new type="range" to specify a dollar amount.

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

Can anyone recommend a plugin with <input> styles with Bootstrap's form elements? Particularly, HTML5 Range inputs [as well as a corresponding output element].

I'm surprised bootstrap doesn't already offer HTML5 form assets and want to avoid reinventing the wheel; Unless absolutely necessary.

If anyone could point me in the right direction, I would appreciate it.

Solution 1

There is no particular class in bootstrap for input type range but you can customize it with CSS and simple javascript. Pretty cool here is an example for that!

See Demo here: jsfiddle - Input type range styling

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>

Solution 2

Check out Bootstrap Slider, it's very "Bootstrappy"(!)

Examples here

Looks like this:

With lots of customisability.

Comments

[Penny Liu]

Seems that Bootstrap 4 is not yet supported, see issue here. github.com/seiyria/bootstrap-slider/issues/689

[Admin]

Well explained, Great answer.