Is it possible to change multiple values with a single input slider? Because I tried many times but was unable to change different values. I want to change the value of 50,000 which is at the top of the slider, and the value of 250k which is in the unique view’s container. When we move the slider forward the 50,000 value should be changed to 10,000 per step i.e. 50,000 then 60,000 then 70,000 and so on till 1,000,000. And the value of 250k should be changed to 50K per step i.e. 250k then 300k then 350k and so on till 5M. I have made this in HTML, CSS, and JavaScript. Codes are as follows-
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;
}
.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;
}<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">250K</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>