Can a single input slider be used to modify several values at once?

Is there a way to adjust multiple values with just one input slider? I've attempted to do so several times without success. My goal is to modify the value of 50,000 at the top of the slider as well as the value of 250k in the unique view's container. As we slide the slider forward, the 50,000 value should increment by 10,000 for each step (e.g., from 50,000 to 60,000 to 70,000 and so on up to 1,000,000). Additionally, the 250k value should increase by 50K per step (e.g., from 250k to 300k to 350k and so on up to 5M). This project is created using HTML, CSS, and JavaScript, and the codes are provided below:

const input = document.querySelector("input"),
        number = document.querySelector(".slide-value"),
        uniqueViews = document.querySelector(".unique_views");

    input.addEventListener("input", () => {
        number.textContent = input.value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
.campaign {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .campaign .campaign-details {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 75%;
        background: gray;
        box-shadow: 5px 5px 4px rgba(0, 0, 0, .16);
        border-radius: 10px;
        margin-top: 60px;
        padding: 20px 0;
    }

    .campaign .campaign-details .campaign-container .campaign-cards {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        margin: 0 10%;
    }

    .campaign .campaign-details .campaign-container .campaign-cards .card {
        width: calc(25% - 30px);
        border: 1px solid red;
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 35px 30px;
    }

    .campaign .campaign-details .campaign-container .campaign-slider {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 130px;
        width: 100%;
        border: 1px solid red;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper .slide-value {
        font-size: 27px;
        font-weight: 500;
        color: #333;
        width: 70px;
        text-align: center;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper input {
        width: 100%;
        appearance: none;
        height: 12px;
        background-color: #bdd6f9;

        ...


<div class="campaign">
            <h2 class="header custom-cursor">Making Influencer Campaign Simple</h2>
            <div class="details campaign-details">
                <div class="campaign-container">
                    <div class="campaign-cards">
                        <div class="card">
                            <div class="title">
                                <h3>Traffic</h3>
                            </div>
                        </div>
                    </div>

                    <div class="campaign-slider">
                        <div class="wrapper">
                            <span class="slide-value">50,000</span>
                            <input type="range" min="50000" step="10000" max="1000000" value="50000" />
                            <div class="min-max-value">
                                <p>Min: ₹50,000</p>
                                <p>Max: ₹1,000,000</p>
                            </div>
                        </div>
                    </div>

                   ...

                </div>
            </div>
        </div>

javascripthtmljquerycss

Answer №1

I suggest implementing jQuery for your solution.

Initially, I enclosed the value of "unique_views" in a span to facilitate easier selection.

Next, I captured the slider change event, retrieved the value of "unique_views," and multiplied the new value by 5 before setting it.

const input = document.querySelector("input"),
        number = document.querySelector(".slide-value"),
        uniqueViews = document.querySelector(".unique_views");

    input.addEventListener("input", () => {
        number.textContent = input.value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
    
$('input').on("input change",(e)=>{
  // get the current value of "unique_views"
  var unique_views = $('.unique_views').find('span').text(); 
  // get the value of current slider and remove 3 last digits
  var current_slider_val = e.target.value.substring(0, e.target.value.length-3);
  // calculate the new value of "unique_views"
  var new_unique_views = current_slider_val * 5;
  // set the new value of "unique_views"
  $('.unique_views span').text(new_unique_views);
});
.campaign {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .campaign .campaign-details {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 75%;
        background: gray;
        box-shadow: 5px 5px 4px rgba(0, 0, 0, .16);
        border-radius: 10px;
        margin-top: 60px;
        padding: 20px 0;
    }

    .campaign .campaign-details .campaign-container .campaign-cards {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        margin: 0 10%;
    }

    .campaign .campaign-details .campaign-container .campaign-cards .card {
        width: calc(25% - 30px);
        border: 1px solid red;
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 35px 30px;
    }

    .campaign .campaign-details .campaign-container .campaign-slider {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 130px;
        width: 100%;
        border: 1px solid red;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper .slide-value {
        font-size: 27px;
        font-weight: 500;
        color: #333;
        width: 70px;
        text-align: center;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper input {
        width: 100%;
        appearance: none;
        height: 12px;
        background-color: #bdd6f9;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper input::-webkit-slider-thumb {
        appearance: none;
        height: 18px;
        width: 18px;
        border: 2px solid #fff;
        background-color: #fff;
        box-shadow: 0.5px 0.5px 4px -1.5px #000;
    }

    .campaign .campaign-details .campaign-container .campaign-slider .wrapper .min-max-value {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .campaign .campaign-details .campaign-container .campaign-matrics {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .campaign .campaign-details .campaign-container .campaign-matrics .matrics-block {
        border: 1px solid red;
        background-color: #fff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 60px;
        width: 50%;
        margin: 0 20px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campaign">
        <h2 class="header custom-cursor">Making Influencer Campaign Simple</h2>
        <div class="details campaign-details">
            <div class="campaign-container">
                <div class="campaign-cards">
                    <div class="card">
                        <div class="title">
                            <h3>Traffic</h3>
                        </div>
                    </div>
                </div>

                <div class="campaign-slider">
                    <div class="wrapper">
                        <span class="slide-value">50,000</span>
                        <input type="range" min="50000" step="10000" max="1000000" value="50000" />
                        <div class="min-max-value">
                            <p>Min: ₹50,000</p>
                            <p>Max: ₹1,000,000</p>
                        </div>
                    </div>
                </div>

                <div class="campaign-matrics">
                    <div class="matrics-block">
                        <div class="matrics-title">
                            <h4>Unique Views</h4>
                        </div>
                        <div class="matrics-value">
                            <h2 class="unique_views"><span>250</span>K</h2>
                        </div>
                    </div>

                    <div class="matrics-block">
                        <div class="matrics-title">
                            <h4>Cost per View</h4>
                        </div>
                        <div class="matrics-value">
                            <h2>0.2</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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

The connection between the layout of dropdown menus and the way data is handled in forms

I have discovered three different methods for creating dropdowns that can be used in forms: 1) Utilizing HTML with "form-dedicated" attributes such as select and option value="" 2) Implementing the Bootstrap framework with div classes like "dropdown", Butt ...

javascripthtmlcsstwitter-bootstrap

Maintain the state of the previous page in Vue to ensure continuity

Currently in the process of creating a small PWA to simulate an Android app, I have discovered Vuejs. However, I encountered an issue that has proven difficult to resolve. While scrolling through lists on the homepage for movies, TV shows, or news, clicki ...

javascriptvue.jsvuejs2progressive-web-apps

Is there a way to use Puppeteer to take screenshots of a list of URLs?

Within an async function, I have set up a loop to iterate over a list of URLs. The data is sourced from an .xls file that has been converted to .json. My objective is to take a screenshot of each URL in the array, but I keep encountering an UnhandledPromis ...

javascriptarraysnode.jsjsonpuppeteer

Ensure the presence of a value in an array using Angular

I need to check if any of the "cuesData" have values or lengths greater than 0. However, in my current code, I can only evaluate the first array and not the rest. https://i.sstatic.net/bMpvg.jpg TS checkValues(values) { const result = Object.values ...

javascriptarraysangulartypescriptecmascript-2016

Obtaining class names with jQuery: A beginner's guide

If we consider an element structured as follows: <div id="dv" class="red green blue">Something Here !!</div> An attempt was made using the following code snippet: alert($('#dv').attr('class')); However, this returned all ...

jquery

What is the best way to keep a div element fixed on the page no matter where you scroll?

For example: I have an extensive inventory of items, and as I hover my mouse over each item, a corresponding picture appears in this section. The div stays fixed in place regardless of scrolling. It works similar to a frame. ...

javascripthtmlcssxhtml

Steps to access the file path of a swf document stored in a MYSQL database and display it on a web page

There seems to be an issue with my code below. The database I am working with is named nisreen, and the table within it is called ana. My goal is to retrieve the path of a SWF file from the database and display it on a web page. <!DOCTYPE html PUBLIC ...

phpmysqlhtml

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

Guide on removing the parent JSON array while retaining the child JSON array

I have been searching for a solution to remove specific JSON array elements, but I have not found one yet. Here is the JSON data I am working with: [ { "KODE": [ { "name": "kode", "value": [ ...

javascriptjson

A guide to adjusting the size of an iframe within a bootstrap modal

I am currently facing an issue where I am trying to display an iframe inside a bootstrap modal. The challenge is that the content within the iframe is dynamic, so the size may vary each time the modal is opened. As seen here, the modal appears too big and ...

htmlbootstrap-4bootstrap-modal

Set an HTML line break after every comma in the array

Here is my array: var a = ['bla bla bla', 'bla bla', 'bla'] I want each value to be displayed on a new line after every comma (<br />), but I am unsure how to achieve this. I attempted the following approach: var a = [& ...

javascripthtmlreactjs

What is the best way to center align and add an icon to the header in Ionic?

How can I center align an "ion-ios-arrow-up" icon in the header of my Ionic app, similar to the concept shown below? This is my HTML template: <ion-view cache-view="false" view-title="Historical HPP"> <ion-nav-bar class="nav-title-slide-ios7 ...

cssangularjsionic-framework

What is the best way to save only the time in MySQL using Sequelize?

How can I properly store the Time HH:MM:SS using sequelize without encountering errors? I've tried using Time as a String and also as a Date Object, but I'm still facing issues. Here is the function I am using: const dateCollection = await booki ...

javascriptmysqlnode.jsexpresssequelize.js

Transferring an array to PHP using AJAX

In this coding scenario, I initialize my array: let myArray = []; Within a loop, elements are added to the array as follows: myArray.push($(this).data('id')); // Example: [1, 2, 3, 4] Subsequently, I transmit this data to PHP using AJAX throu ...

javascriptphpjquery

Effective Ways to Transfer Data from Angular to CSS in an HTML Table

I am working on an Angular web app that includes an HTML table. The data for this table is retrieved from a database via a service and displayed as text. One of the columns in the table represents a Status, which I want to visually represent as a colored ...

cssangulartypescript

Retrieve text from the input field after a brief pause following each keystroke for uninterrupted typing

I am currently facing an issue with a form that is submitted remotely whenever the elements change. Specifically, when a user types in the search field and hits a key, the form gets submitted multiple times even though only the final submission matters. I ...

javascriptjqueryjquery-pluginsjquery-events

Issues with CodeIgniter CSRF protection not functioning correctly when using AJAX requests on Internet Explorer

I am facing an issue with CSRF enabled on CodeIgniter. It works fine on FireFox and Google Chrome, but on IE, I see an error in the web developer tool network panel: Upon further investigation, I found that my $.post call looks like this: var ctn = $.coo ...

jqueryajaxcodeigniterinternet-explorercsrf

Identifying activity on a handheld device

I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...

javascripthtmlcssmobile

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Dynamic Menu Highlight Styling

I'm having trouble highlighting the current menu item when clicked using CSS. Here is the code I have: #sub-header ul li:hover{ background-color: #000;} #sub-header ul li:hover a{ color: #fff; } #sub-header ul li.active{ background-color: #000; } #su ...

javascripthtmljquerycss