Concealing a label for a certain range of values

Question

Concealing a label for a certain range of values

Does anyone have a clever solution for dynamically hiding a label associated with an input range element when the value is below a certain threshold? And then reappearing it once the value surpasses a specific minimum?

Any thoughts on this matter?

Thank you

$('input[type="range"]').on('mouseup', function() {
  this.blur();
}).on('mousedown input', function() {
  $('#1').text(this.value + "%");
  $('#2').text(100 - this.value + "%");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input type="range" min="0" max="100" step="1" value="50" />

  <div class="container2">
    <label id="1">50%</label>
  </div>

  <div class="container3">
    <label id="2">50%</label>
  </div>
</div>

javascript

Answer 1

Answer №1

To validate a condition, you can use an if statement and then utilize hide() or show() to display or hide the desired element.

For instance, in the scenario below, the label with id="2" is displayed when the value is 50 or higher, and hidden when the value is lower.

$('input[type="range"]').on('mouseup', function() {
  this.blur();
}).on('mousedown input', function() {
  var label1value = this.value;
  var label2value = 100 - this.value;

  $('#1').text(this.value + "%");
  $('#2').text(100 - this.value + "%");
  
  // check if value is greater than or equal to 50
  if (this.value >= 50) {
    // display element if the condition is met
    $('#2').show();
  } else {
    // hide element if the condition is not met
    $('#2').hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input type="range" min="0" max="100" step="1" value="50" />

  <div class="container2">
    <label id="1">50%</label>
  </div>

  <div class="container3">
    <label id="2">50%</label>
  </div>
</div>

Answer 2

To validate a condition, you can use an if statement and then utilize hide() or show() to display or hide the desired element.

For instance, in the scenario below, the label with id="2" is displayed when the value is 50 or higher, and hidden when the value is lower.

$('input[type="range"]').on('mouseup', function() {
  this.blur();
}).on('mousedown input', function() {
  var label1value = this.value;
  var label2value = 100 - this.value;

  $('#1').text(this.value + "%");
  $('#2').text(100 - this.value + "%");
  
  // check if value is greater than or equal to 50
  if (this.value >= 50) {
    // display element if the condition is met
    $('#2').show();
  } else {
    // hide element if the condition is not met
    $('#2').hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input type="range" min="0" max="100" step="1" value="50" />

  <div class="container2">
    <label id="1">50%</label>
  </div>

  <div class="container3">
    <label id="2">50%</label>
  </div>
</div>

Answer 3

Answer №2

It seems like you're looking for a way to hide the range label when the value is below 50. Below is a code sample along with a demo to help you achieve that.

Using Plain JavaScript

// When the document is loaded
document.addEventListener("DOMContentLoaded", function() {
  var rangeLimit = 50;

  function rangeValueListener(event) {
    var rangeElement = event.target || event.srcElement;
    setRangeLabelValue(rangeElement);
  }

  function setRangeLabelValue(rangeElement) {
    var rangeLabelElement = document.querySelector(
      'label[for="' + rangeElement.id + '"]'
    );
    
    var rangeValue = rangeElement.value;
    rangeLabelElement.innerText = rangeValue + "%";

    if (rangeValue < rangeLimit) {
      rangeLabelElement.style.display = "none";
    } else {
      rangeLabelElement.style.display = "initial";
    }
  }

  var rangeElement = document.querySelector("#myRange");
  rangeElement.addEventListener("input", rangeValueListener);
  rangeElement.addEventListener("change", rangeValueListener);
  setRangeLabelValue(rangeElement);
});

Code snippet using jQuery (adapted from the above)

$(document).ready(function() {
  var rangeLimit = 50;
  var rangeDefaultValue = 65;

  function rangeValueListener(event) {
    setRangeLabelValue(event.target);
  }

  function setRangeLabelValue(rangeElement) {
    var rangeElementId = rangeElement.id || rangeElement.attr("id");
    var rangeLabelElement = $('label[for="' + rangeElementId + '"]');
    var rangeValue = rangeElement.value || rangeDefaultValue;
    rangeLabelElement.text(rangeValue + "%");
    if (rangeValue < rangeLimit) {
      rangeLabelElement.hide();
    } else {
      rangeLabelElement.show();
    }
  }

  var rangeElement = $("#myRange");
  rangeElement.on("input change", rangeValueListener);
  setRangeLabelValue(rangeElement);
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <input id="myRange" type="range" min="0" max="100" step="1" value="65" />
    <label for="myRange"></label>
  </body>
</html>

Answer 4

It seems like you're looking for a way to hide the range label when the value is below 50. Below is a code sample along with a demo to help you achieve that.

Using Plain JavaScript

// When the document is loaded
document.addEventListener("DOMContentLoaded", function() {
  var rangeLimit = 50;

  function rangeValueListener(event) {
    var rangeElement = event.target || event.srcElement;
    setRangeLabelValue(rangeElement);
  }

  function setRangeLabelValue(rangeElement) {
    var rangeLabelElement = document.querySelector(
      'label[for="' + rangeElement.id + '"]'
    );
    
    var rangeValue = rangeElement.value;
    rangeLabelElement.innerText = rangeValue + "%";

    if (rangeValue < rangeLimit) {
      rangeLabelElement.style.display = "none";
    } else {
      rangeLabelElement.style.display = "initial";
    }
  }

  var rangeElement = document.querySelector("#myRange");
  rangeElement.addEventListener("input", rangeValueListener);
  rangeElement.addEventListener("change", rangeValueListener);
  setRangeLabelValue(rangeElement);
});

Code snippet using jQuery (adapted from the above)

$(document).ready(function() {
  var rangeLimit = 50;
  var rangeDefaultValue = 65;

  function rangeValueListener(event) {
    setRangeLabelValue(event.target);
  }

  function setRangeLabelValue(rangeElement) {
    var rangeElementId = rangeElement.id || rangeElement.attr("id");
    var rangeLabelElement = $('label[for="' + rangeElementId + '"]');
    var rangeValue = rangeElement.value || rangeDefaultValue;
    rangeLabelElement.text(rangeValue + "%");
    if (rangeValue < rangeLimit) {
      rangeLabelElement.hide();
    } else {
      rangeLabelElement.show();
    }
  }

  var rangeElement = $("#myRange");
  rangeElement.on("input change", rangeValueListener);
  setRangeLabelValue(rangeElement);
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <input id="myRange" type="range" min="0" max="100" step="1" value="65" />
    <label for="myRange"></label>
  </body>
</html>

Concealing a label for a certain range of values

Answer №1

Answer №2

Similar questions

Node 18 is having trouble locating NPM and is unable to locate the module './es6/validate-engines.js'

How to include <li> in a preexisting <ul> using JSON data in jQuery

How to make a JQuery list item unselectable when appending it

tips on utilizing the JSON information transmitted from the backend

How can I retrieve a data field with a colon in its key using Cytoscape.js?

Click on a row in ReactTable to toggle the background color or expand the row

How can you temporarily delay the original ajax request until a certain condition is satisfied before proceeding?

Difficulty with AngularJs Translation Partials

res.render() Displaying Data in Frontend using Local Variables

Can you pinpoint the weak wiring in this AngularJS function?

Performing a JavaScript AJAX request to send a complex object containing an array of other complex objects within it

Performing calculations within handsontable

The functionality of the click event attached with the addEventListener is

Using JavaScript to pass a newly created variable as an argument in a default

Troubleshooting: Jquery show effects not functioning as expected

Is it possible for amCharts to show the data properly?

Execute a Python script using an Ajax jQuery call

One or multiple web browsers set in the Browserslist of the project

Any tips on how to retrieve the data from an AJAX request using vanilla JavaScript?

What steps can I take to perform unit testing on a custom element?