5+ Bootstrap Range Slider Examples

This post contains a total of 5+ Hand-Picked Bootstrap Range Slider Examples with Source Code. All these Range Sliders are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Range Slider Examples

1. By Ahmed Badran

Made by Ahmed Badran. A simple Bootstrap Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<style>
.range-form {
  width: 400px;
  margin: auto;
  padding: 50px;
}

.range-slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 10px;
  border-radius: 5px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s;
  /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
}
.range-slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 18px;
  /* Set a specific slider handle width */
  height: 18px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
  border-radius: 50%;
}
.range-slider::-moz-range-thumb {
  width: 18px;
  /* Set a specific slider handle width */
  height: 18px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

/* Mouse-over effects */
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
</style>
</head>
<body>
  <form class="range-form">
  <div class="form-group row">
    <div class="col-md-9">
      <label for="formControlRange">Example Range input</label>
    <input type="range" min="1" max="100" value="50" class="form-control-range range-slider" id="myRange">
    </div>
    <div class="col-md-3">
      <span id="demo">0</span>
  </div>
    </div>
</form>
      <script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
  output.innerHTML = this.value;
};
    </script>
</body>
</html>

2. By Playground FISHH

Made by Playground FISHH. Bootstrap Slider with Tooltip and increase / decrease button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:[email protected];400&display=swap");
body {
  font-family: "Source Sans Pro", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.slider.slider-horizontal {
  width: 210px;
  height: 20px;
}

.slider.slider-horizontal .slider-track {
  height: 10px;
  width: 100%;
  margin-top: -5px;
  top: 50%;
  left: 0;
}

.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high {
  height: 100%;
  top: 0;
  bottom: 0;
}

.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
  margin-left: -10px;
}

.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-width: 0 10px 10px 10px;
  width: 0;
  height: 0;
  border-bottom-color: #036fa5;
  margin-top: 0;
}

.slider.slider-horizontal .slider-tick-container {
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slider.slider-horizontal .slider-tick-label-container {
  white-space: nowrap;
  margin-top: 20px;
}

.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
  display: inline-block;
  text-align: center;
}

.slider.slider-horizontal.slider-rtl .slider-track {
  left: initial;
  right: 0;
}

.slider.slider-horizontal.slider-rtl .slider-tick,
.slider.slider-horizontal.slider-rtl .slider-handle {
  margin-left: initial;
  margin-right: -10px;
}

.slider.slider-horizontal.slider-rtl .slider-tick-container {
  left: initial;
  right: 0;
}

.slider.slider-vertical {
  height: 210px;
  width: 20px;
}

.slider.slider-vertical .slider-track {
  width: 10px;
  height: 100%;
  left: 25%;
  top: 0;
}

.slider.slider-vertical .slider-selection {
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}

.slider.slider-vertical .slider-track-low,
.slider.slider-vertical .slider-track-high {
  width: 100%;
  left: 0;
  right: 0;
}

.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
  margin-top: -10px;
}

.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
  border-width: 10px 0 10px 10px;
  width: 1px;
  height: 1px;
  border-left-color: #036fa5;
  margin-left: 0;
}

.slider.slider-vertical .slider-tick-label-container {
  white-space: nowrap;
}

.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
  padding-left: 4px;
}

.slider.slider-vertical.slider-rtl .slider-track {
  left: initial;
  right: 25%;
}

.slider.slider-vertical.slider-rtl .slider-selection {
  left: initial;
  right: 0;
}

.slider.slider-vertical.slider-rtl .slider-tick.triangle,
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
  border-width: 10px 10px 10px 0;
}

.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
  padding-left: initial;
  padding-right: 4px;
}

.slider.slider-disabled .slider-handle {
  background-color: #cfcfcf;
  background-image: linear-gradient(to bottom, #dfdfdf, #bebebe);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#DFDFDF", endColorstr="#BEBEBE",GradientType=0);
}

.slider.slider-disabled .slider-track {
  background-color: #e7e7e7;
  background-image: linear-gradient(to bottom, #e5e5e5, #e9e9e9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E5E5E5", endColorstr="#E9E9E9",GradientType=0);
  cursor: not-allowed;
}

.slider input {
  display: none;
}

.slider .tooltip-inner {
  white-space: nowrap;
  max-width: none;
}

.slider .bs-tooltip-top .tooltip-inner,
.slider .bs-tooltip-bottom .tooltip-inner {
  position: relative;
  left: -50%;
}

.slider.bs-tooltip-left .tooltip-inner,
.slider.bs-tooltip-right .tooltip-inner {
  position: relative;
  top: -100%;
}

.slider .tooltip {
  pointer-events: none;
}

.slider .tooltip.bs-tooltip-top .arrow,
.slider .tooltip.bs-tooltip-bottom .arrow {
  left: -0.4rem;
}

.slider .tooltip.bs-tooltip-top {
  margin-top: -44px;
}

.slider .tooltip.bs-tooltip-bottom {
  margin-top: 2px;
}

.slider .tooltip.bs-tooltip-left,
.slider .tooltip.bs-tooltip-right {
  margin-top: -14px;
}

.slider .tooltip.bs-tooltip-left .arrow,
.slider .tooltip.bs-tooltip-right .arrow {
  top: 8px;
}

.slider .hide {
  display: none;
}

.slider-track {
  background-color: #f7f7f7;
  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F5F5F5", endColorstr="#F9F9F9",GradientType=0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: absolute;
  cursor: pointer;
}

.slider-selection {
  background-color: #f7f7f7;
  background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F9F9F9", endColorstr="#F5F5F5",GradientType=0);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;
}

.slider-selection.tick-slider-selection {
  background-color: #46c1fe;
  background-image: linear-gradient(to bottom, #52c5ff, #3abcfd);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#52c5ff", endColorstr="#3abcfd",GradientType=0);
}

.slider-track-low,
.slider-track-high {
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;
  background: transparent;
}

.slider-handle {
  background-color: #0478b2;
  background-image: linear-gradient(to bottom, #0480be, #036fa5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0480BE", endColorstr="#036fa5",GradientType=0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #0480be;
  border: 0px solid transparent;
}

.slider-handle:hover {
  cursor: pointer;
}

.slider-handle.round {
  border-radius: 20px;
}

.slider-handle.triangle {
  background: transparent none;
}

.slider-handle.custom {
  background: transparent none;
}

.slider-handle.custom::before {
  line-height: 20px;
  font-size: 20px;
  content: "โ˜…";
  color: #726204;
}

.slider-tick {
  background-color: #f7f7f7;
  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F5F5F5", endColorstr="#F9F9F9",GradientType=0);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  position: absolute;
  cursor: pointer;
  width: 20px;
  height: 20px;
  filter: none;
  opacity: 0.8;
  border: 0px solid transparent;
}

.slider-tick.round {
  border-radius: 50%;
}

.slider-tick.triangle {
  background: transparent none;
}

.slider-tick.custom {
  background: transparent none;
}

.slider-tick.custom::before {
  line-height: 20px;
  font-size: 20px;
  content: "โ˜…";
  color: #726204;
}

.slider-tick.in-selection {
  background-color: #46c1fe;
  background-image: linear-gradient(to bottom, #52c5ff, #3abcfd);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#52c5ff", endColorstr="#3abcfd",GradientType=0);
  opacity: 1;
}

/* TOOLTIP CLASSES */
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-auto[x-placement^=top],
.bs-tooltip-top {
  padding: 0.4rem 0;
}

.bs-tooltip-auto[x-placement^=top] .arrow,
.bs-tooltip-top .arrow {
  bottom: 0;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-auto[x-placement^=right],
.bs-tooltip-right {
  padding: 0 0.4rem;
}

.bs-tooltip-auto[x-placement^=right] .arrow,
.bs-tooltip-right .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-auto[x-placement^=bottom],
.bs-tooltip-bottom {
  padding: 0.4rem 0;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow,
.bs-tooltip-bottom .arrow {
  top: 0;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-auto[x-placement^=left],
.bs-tooltip-left {
  padding: 0 0.4rem;
}

.bs-tooltip-auto[x-placement^=left] .arrow,
.bs-tooltip-left .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before,
.bs-tooltip-left .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

/* CUSTOMIZATION
   ========================================================================== */
/* Slider */
.slider.slider-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5px;
  outline: none;
}

.slider.slider-horizontal .slider-track {
  height: 5px;
  width: 100%;
  margin-top: 0;
  border-radius: 10px;
  background: white;
}

.slider-selection {
  box-shadow: none;
  border-radius: 10px;
  background-color: #50d8d9;
  background-image: none;
}

.slider-track-low,
.slider-track-high {
  border-radius: 50px;
  background-color: #eeeeee;
}

/* Slider handle */
.slider-handle {
  background-image: none;
  background-repeat: repeat-x;
  filter: none;
  background-color: #50d8d9;
  border: 0px solid transparent;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
}

.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
  margin-top: -6px;
}

/* Tooltip */
.slider .tooltip.bs-tooltip-bottom {
  margin-top: -2px !important;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  width: 4px;
  height: 4px;
  bottom: -8px;
  background-color: white;
  box-shadow: 0px -1px 2px 2px rgba(0, 0, 0, 0.05);
  transform: rotate(45deg);
}

.tooltip-inner {
  padding: 3px 15px 2px;
  font-size: 15px;
  font-weight: 700;
  color: #333333;
  text-align: center;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
}

/* STYLEGUIDE COMPONENT CLASSES */
.c-range-slider {
  max-width: 460px;
  width: 100%;
}

.c-range-slider__wrapper {
  display: flex;
  align-items: center;
}

.c-range-slider__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 0;
  color: #50d8d9;
  border-radius: 20px;
  border: 1px solid #50d8d9;
  background-color: #ffffff;
  cursor: pointer;
}

.c-range-slider__line {
  position: relative;
  width: 100%;
  margin: 0 10px;
}

.c-range-slider__label {
  font-size: 12px;
  font-weight: 400;
  color: #777777;
  text-align: center;
  text-transform: uppercase;
}

.c-range-slider__label--title {
  display: block;
  max-width: 80%;
  margin: 0 auto 2px;
}

.c-range-slider__label--min {
  position: absolute;
  top: -16px;
}

.c-range-slider__label--max {
  position: absolute;
  top: -16px;
  right: 0;
}
</style>
</head>
<body>
  <div class="c-range-slider">
    <span class="c-range-slider__label c-range-slider__label--title">
        Text Here   
    </span>
    <div class="c-range-slider__wrapper">
        <button class="c-range-slider__button js-range-slider-less">
            - 
        </button>
        <div class="c-range-slider__line">
            <span class="c-range-slider__label c-range-slider__label--min">
                0
            </span>
            <span class="c-range-slider__label c-range-slider__label--max">
                120
            </span>
            <input id="range-slider" type="text" 
                   data-slider-min="0" 
                   data-slider-max="120" 
                   data-slider-step="1" 
                   data-slider-value="49" />
        </div>
        <button class="c-range-slider__button js-range-slider-more">
            + 
        </button>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js'></script>
      <script>
var slider = new Slider("#range-slider", {
  tooltip: 'always',
  tooltip_position: 'bottom',
  formatter: function (value) {
    return value + ' Tooltip';
  } });

var moreButton = document.querySelector('.js-range-slider-more');
moreButton.addEventListener('click', function (event) {
  event.preventDefault();
  slider.setValue(slider.getValue() + 1);
});
var lessButton = document.querySelector('.js-range-slider-less');
lessButton.addEventListener('click', function (event) {
  event.preventDefault();
  slider.setValue(slider.getValue() - 1);
});
    </script>
</body>
</html>

3. By Oki BAYU

Made by Oki BAYU. Bootstrap Price Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"  media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1></h1>
  </div>
  <div data-role="main" class="ui-content">
    <form method="post" action="#">
      <div data-role="rangeslider">
        <label for="price-min">Price:</label>
        <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
        <label for="price-max">Price:</label>
        <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
      </div>
        <input type="submit" data-inline="true" value="Submit">
        <p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
      </form>
  </div>
</div>
</body>
</html>

4. By CarbonCopyLabs

Made by CarbonCopyLabs. Bootstrap Range slider with Tooltip and Submit Button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
#search-bar {
  width: 70%;
  margin: 50px auto;
}

#search-bar input {
  border: 1px solid #ced4da;
  border: 0;
  -webkit-appearance: none;
}

#search-bar .input-group {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

#search-bar input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #03a9f4;
  border-radius: 25px;
}

#search-bar input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

#search-bar input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #03a9f4;
}

#search-bar .range-wrap {
  padding: 4px 6px 0px 6px;
  position: relative;
}

#search-bar .range-value {
  position: absolute;
  top: -50%;
}

#search-bar .range-value span {
  width: 40px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #03a9f4;
  color: #fff;
  font-size: 12px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}

#search-bar .range-value span:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #03a9f4;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
</style>
</head>
<body>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-bar">
    <form
      id="product-search-bar"
      action=""
      method="POST"
    >
      <div class="input-group">
        <input
          type="text"
          class="form-control"
          id="search-product"
          name="search-product"
          placeholder="Search..."
          required
        />
        <div class="input-group-append">
          <div class="range-wrap">
            <div class="range-value" id="rangeV"></div>
            <input
              id="range-km"
              name="range-km"
              type="range"
              min="0"
              max="50"
              value="0"
              step="5"
            />
          </div>
          <button class="btn btn-info" type="submit">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
      <script>
let range = $("#range-km");
let rangeV = $("#rangeV");
const setValue = () => {
  let newValue = Number(
  (range.val() - range.attr("min")) * 100 / (
  range.attr("max") - range.attr("min"))),

  newPosition = 10 - newValue * 0.2;
  rangeV.html(`<span>${range.val()}km</span>`);
  rangeV.css("left", `calc(${newValue}% + (${newPosition}px))`);
};
setValue();
range.on("input", setValue);
    </script>
</body>
</html>

5. By Woody

Made by Woody. Basic Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.3/css/bootstrap-slider.min.css'>
</head>
<body>
  <br /><br /><input id="ex6" type="text" data-slider-min="0.1" data-slider-max="1.0" data-slider-step="0.1" data-slider-value="0.5"/>

<span id="ex6CurrentSliderValLabel"> <span id="ex6SliderVal">0.5</span></span>
  <script src='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.3/bootstrap-slider.min.js'></script>
      <script>
// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function (sliderValue) {
  document.getElementById("ex6SliderVal").textContent = sliderValue;
});
    </script>
</body>
</html>

6. By Oskar Borowski

Made by Oskar Borowski. Bootstrap range slider percentage tool. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
  
<style>
.newv {
  background-color: #e9ecef;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row pt-4">
    <div class="col-12 col-xs-12 col-sm-12 col-md-8 col-lg-6 col-xl-6 col-xxl-6">
      <div class="card">
        <div class="card-header">
    <h6 class="card-title mb-0 py-1">Percent (size) calculator</h6>
  </div>
        <div class="card-body py-4">
          <div class="row mb-3">
  <div class="col-auto">
    <label for="inputWidth" class="col-form-label">Width:</label>
  </div>
  <div class="col-auto">
    <div class="row pb-2">
    <input type="text" id="inputWidth" class="form-control"></div>
    <div class="row">
      <input type="text" id="inputWidthResult" class="form-control newv">
    </div>
  </div>
<div class="col-auto">
  <div class="row">
    <label for="inputHeight" class="col-form-label">Height:</label>
  </div></div>
  <div class="col-auto">
     <div class="row pb-2">
    <input type="text" id="inputHeight" class="form-control">
  </div>
    <div class="row"><input type="text" id="inputHeightResult" class="form-control newv"></div>
            </div></div>
          <div class="row">
            <div class="col-12">
          <input type="range" class="form-range" min="0" max="100" step="10" value="0" id="sliderRange">
            
          <label id="fPercent">0%</label></div>
        </div>
      </div>
    </div>
  </div>
</div></div>
  <script src='https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js'></script>
      <script>
var slider = document.getElementById("sliderRange");
var output = document.getElementById("fPercent");
var inputw = document.getElementById("inputWidth");
var outputw = document.getElementById("inputWidthResult");
output.value = slider.value; // input have value not innerhtml
slider.oninput = function () {
  output.value = this.value;
};

slider.addEventListener("change", function () {
  document.getElementById("fPercent").textContent = slider.value + '%';
  document.getElementById("inputWidthResult").value = Number(document.getElementById("inputWidth").value) * Number(slider.value) / 100;
  document.getElementById("inputHeightResult").value = Number(document.getElementById("inputHeight").value) * Number(slider.value) / 100;
}, false);
    </script>
</body>
</html>