Display the importance of utilizing Bootstrap 4's range input feature

Question

Display the importance of utilizing Bootstrap 4's range input feature

Is there a way to display the value of a range input in Bootstrap without using Javascript? I found this tutorial but it doesn't show how to do it: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs

<div class="container">
  <form>
    <div class="form-group">
      <label for="formControlRange">Example Range input</label>
      <input type="range" class="form-control-range" id="formControlRange">
    </div>
  </form>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

If possible, I would like to make minimal custom modifications and avoid using Javascript altogether.

Appreciate any help or guidance you can provide. Thank you.

html css bootstrap-4 range

Answer 1

Answer №1

Implementing this functionality without Javascript may be a challenge, but you can try out this straightforward solution:

<div class="container">
  <form>
    <div class="form-group">
      <label for="formControlRange">Example Range input</label>
      <input type="range" class="form-control-range" id="formControlRange" onInput="$('#rangeval').html($(this).val())">
      <span id="rangeval">50<!-- Default value --></span>
    </div>
  </form>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

Implementing this functionality without Javascript may be a challenge, but you can try out this straightforward solution:

<div class="container">
  <form>
    <div class="form-group">
      <label for="formControlRange">Example Range input</label>
      <input type="range" class="form-control-range" id="formControlRange" onInput="$('#rangeval').html($(this).val())">
      <span id="rangeval">50<!-- Default value --></span>
    </div>
  </form>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 3

Answer №2

Follow these steps to achieve it using vanilla JS. It is recommended to utilize the onChange event as opposed to onInput since the latter will only trigger when the user initially sets a value, not when they modify it.

<div class="container">
  <form>
    <div class="form-group">
      <label for="formControlRange">Example Range input</label>
      <input type="range" 
        class="form-control-range" 
        id="formControlRange" 
        onChange="document.getElementById('rangeval').innerText = document.getElementById('formControlRange').value">
      <span id="rangeval">50<!-- Default value --></span>
    </div>
  </form>
</div>

Answer 4

Follow these steps to achieve it using vanilla JS. It is recommended to utilize the onChange event as opposed to onInput since the latter will only trigger when the user initially sets a value, not when they modify it.

<div class="container">
  <form>
    <div class="form-group">
      <label for="formControlRange">Example Range input</label>
      <input type="range" 
        class="form-control-range" 
        id="formControlRange" 
        onChange="document.getElementById('rangeval').innerText = document.getElementById('formControlRange').value">
      <span id="rangeval">50<!-- Default value --></span>
    </div>
  </form>
</div>

Answer 5

Answer №3

  let slider = $("#range-km");
  let valueDisplay = $("#rangeV");
  const updateValue = () => {
    let newValue = Number(
        ((slider.val() - slider.attr("min")) * 100) /
          (slider.attr("max") - slider.attr("min"))
      ),
      position = 10 - newValue * 0.2;
    valueDisplay.html(`<span>${slider.val()}km</span>`);
    valueDisplay.css("left", `calc(${newValue}% + (${position}px))`);
  };
  updateValue();
  slider.on("input", updateValue);

#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;
}

<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>

Answer 6

  let slider = $("#range-km");
  let valueDisplay = $("#rangeV");
  const updateValue = () => {
    let newValue = Number(
        ((slider.val() - slider.attr("min")) * 100) /
          (slider.attr("max") - slider.attr("min"))
      ),
      position = 10 - newValue * 0.2;
    valueDisplay.html(`<span>${slider.val()}km</span>`);
    valueDisplay.css("left", `calc(${newValue}% + (${position}px))`);
  };
  updateValue();
  slider.on("input", updateValue);

#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;
}

<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>

Display the importance of utilizing Bootstrap 4's range input feature

Answer №1

Answer №2

Answer №3

Similar questions

Condense a lineup of names into only two rows

Use CSS to manipulate the dimensions of an overlay

Container contents are spilling out of control after adjusting container height to auto

Is there a way to trigger a fabric.js event externally?

Adjust the style of an element when hovering over a different element

Build a home page in HTML with full width design

Prevent Symfony2 Twig from rendering HTML content

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I'm experiencing an issue with my Bootstrap Navbar Toggle not toggling

Attempting to extract only the text content from a specific div using XPath

I've created a logo, but why are there two logos on my website?

Ways to distinguish between two div elements that have scroll bars and those that do not

using javascript to retrieve php variables

Leveraging the power of javascript to include content before and after

How can I stop jQuery mobile from updating the document title?

Attaching onchange event to a select menu

Using template expressions to access properties that contain spaces

Is there a way to style the nav-item element specifically on the current page I'm viewing?

Element not found: {"method":"name","selector":"markUp"}

Transforming video files into HTML5 ogg/ogv and mpg4 formats