What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should be set to #808080.

 <form onchange="update();" oninput="update();">
            <input type="range" name="power" min="0" max="100" value="0">
            <br>
         <span>value:0</span>
        
        </form>
    
    <meter id="output" value="88" low="85" max="100" optimum="85">  </meter>
    <div class="indicator"></div>

    
    <script>
      function update() {
        
        let indicatorColors = ['#808080', 'ffff00'];
       // Need to access the indicator here
        let indicator = 
       
    
    // Need to access indicatorColors here
    indicator.style.backgroundColor =
    }
    </script> 
    
    <!-- CSS Section -->
    <style>
    #output{
        height: 20px;
        width: 200px;
    
    }
    .indicator{
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: #808080;
        position: absolute;
        top: 40px;
        left: 210px;
    }
    </style>

Answer №1

How can you retrieve the value?

  1. To obtain the value, modify your HTML by adding update to <input /> instead of using <form />, as the input is what triggers changes.
  2. Include this as an argument in the update() function (update(this)). Here, this refers to the element itself that the onchange() event is called on, which is the <input />.
  3. Now, within your JavaScript code, you can access the input's value within the update() function.

const valueCounter = document.querySelector(".value-counter");
const indicator = document.querySelector(".indicator");

function update(input) { // The input parameter will receive whatever you pass to the update function in your HTML
  const value = input.value;
  valueCounter.textContent = `value:${value}`;

  indicator.style.backgroundColor = value >= 85 ? "#ffff00" : "#808080";
}
.indicator { /* To visualize the changes */
  width: 50px;
  height: 50px;
}
<input type="range" name="power" min="0" max="100" value="0" onchange="update(this)">
<br>
<span class="value-counter">value:0</span>
<div class="indicator"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to avoid the div sidebar overlapping with the content on the

I am currently facing an issue with my website where the div sidebar scrolls with the page and overlaps the page content whenever the window is resized. To see a demonstration of the problem, you can visit this link: Below is the CSS code for the menubar ...

Utilize Bootstrap's form-inline feature to arrange fields side by side in one neat

I am looking to customize my sign-in form layout by displaying the fields in a row next to each other rather than under each other. header: Update: I have successfully implemented this code <header class="navbar navbar-fixed-top navbar-inverse"> & ...

Finding the offsetWidth (or similar measurement) for a list item (LI) element

Can jQuery be used to determine the width of an element? alert($("#theList li:eq(0)").offsetWidth); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="theList"> <li>The quick brown ...

What is the best method to retrieve the country name from a world map using D3.js?

I'm trying to figure out how to retrieve the country name from a click event on the D3 world map. Despite inspecting the DOM, I can't quite understand how the country's name, code, or population is associated with the map. The template for ...

How to maintain the selected value in a Vue.js dropdown even after the page is refreshed

When a user selects a value from a dropdown, it is pushed to the URL. If the page is refreshed, the dropdown should default to the selected value in the URL. This functionality is being implemented in Laravel. I have attempted the following approach, but w ...

Steps for developing a web-based interface for my software

I could use some guidance on how and where to get started. Currently, I have a program written in vb.net that performs basic functions by executing bat files, accessing specific folders, and carrying out command line tasks. My plan is to convert this progr ...

Using the Unsigned Right Shift Operator in PHP (Similar to Java/JavaScript's >>> Operator)

Before marking this as a duplicate, please take a moment to read the information below and review my code * my updated code! The issue I am facing is that I need to implement Java/JavaScript '>>>' (Unsigned Right Shift / Zero-fill Right Shift) ...

Obtain information from local server in a React Native application

I am attempting to retrieve data from my localhost using React Native. My database, named "test," was created using MySQL. The table within the database is named "users" and contains the following rows: picture The connections are established in the ...

Leverage the greater than operator within an AngularJS controller

This is the data stored in my controller: $scope.data = [{ "F": "1,26,000" }]; $scope.data2 = [{ "F": "26,000" }]; Now I want to implement an if-else condition using this data: if (Number($scope.d ...

Ensuring the validation of JSON schemas with dynamically generated keys using Typescript

I have a directory called 'schemas' that holds various JSON files containing different schemas. For instance, /schemas/banana-schema.json { "$schema": "http://json-schema.org/draft-06/schema", "type": "object", "properties": { "banan ...

Unable to resolve the issue within Angular UI modal

Currently, I am facing an issue with displaying a modal using Angular Bootstrap UI. The modal is supposed to resolve items in the controller, but I am struggling to access those resolved items in the modal controller. $scope.showItemsInBill = function(bill ...

Unable to access $_SESSION variable when making AJAX request from a different port

After creating a website with PHP on port 80 (index.php) and setting the session variable with the userid upon login, I encountered an issue when clicking on a link that redirected me to port 8080, which is where a JavaScript file containing node.js proces ...

Using Node.js and the Jade templating engine, display the value of a passed variable

Asking such a basic question makes me feel guilty. app.get('/skumanagement/:id', function (req, res){ var options = req.params.id; // req.params.id = itemidx database.skuGetDetail(options, function (error, data){ winston.log('inf ...

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

Issues with Persistent Navbar Stickiness

I'm encountering an issue with the sticky navbar on my website. I implemented the code for this navbar from a tutorial at w3schools. However, the problem is that the sticky effect on the navigation menu doesn't seem to work correctly. The menu j ...

Discover potential routes to nodes using JavaScript

I need assistance displaying all potential node paths in JavaScript: var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"pare ...

How to extract words from a dynamic router.pathname in NextJS when only the filename is displayed instead of the full path?

I'm keeping this example as straightforward as possible, but I can add more details if needed to solve the issue Currently, I am working with dynamic routes in nextJS. My application fetches data from Twitter based on the keywords entered into the dy ...

RxJs will only consider the initial occurrence of a specific type of value and ignore any subsequent occurrences until a different type of value is encountered

I'm faced with a situation where I need to extract the first occurrence of a specific value type, followed by the next unique value of a different type. Let's break it down with an example: of(1,1,1,1,2,3,4) .pipe( // some operators ) .subsc ...

simultaneous image hover effect for all images

I am experiencing an issue with my CSS and Bootstrap hover effect. The overlay tags are enclosed within a div class, but they all hover simultaneously. Each overlay belongs to a different Bootstrap grid, yet the effect extends even to the empty spaces betw ...

Learn how to transform the html:options collection into html:optionsCollection

What is the best method to transform this code snippet: <html:options collection='catList' property='catId' labelProperty='catName'> using the <html:optionsCollection> tag? ...