英文:
Is it possible to change multiple values with the help of a single input slider?
问题
以下是您提供的内容的中文翻译：
"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-"
"是否可以通过单个输入滑块更改多个值？因为我尝试了很多次，但无法更改不同的值。我想要更改位于滑块顶部的50,000的值，以及位于独特视图容器中的250k的值。当我们向前移动滑块时，50,000的值应该每步更改为10,000，即50,000，然后60,000，然后70,000等，直到1,000,000。而250k的值应该每步更改为50K，即250k，然后300k，然后350k等，直到5M。我使用HTML、CSS和JavaScript制作了这个。代码如下："
（以下是代码部分，没有翻译）
英文:
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-
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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, ",");
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
我建议您使用jQuery。
首先，我在您的“unique_views”值周围放置了一个，以便可以使用选择器更轻松地获取该值。
然后，我捕捉了滑块变化的事件，并获取“unique_views”的值，然后将新值乘以5。
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)=>{
// 获取当前“unique_views”的值
var unique_views = $('.unique_views').find('span').text();
// 获取当前滑块的值并移除最后3位数字
var current_slider_val = e.target.value.substring(0, e.target.value.length-3);
// 计算新的“unique_views”值
var new_unique_views = current_slider_val * 5;
// 设置新的“unique_views”值
$('.unique_views span').text(new_unique_views);
});
CSS部分：
/* CSS部分略 */
HTML部分：
<!-- HTML部分略 -->
请注意，这只是代码的一部分，如果需要完整的代码，请提供更多上下文或详细信息。
英文:
I purpose to you to use jQuery.
First i placed span arround the value of your "unique_views" to get the value easier with selector.
Then i catch the event of slider change and get the value for "unique_views" and set the new value multiply by 5.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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 digit
var current_slider_val = e.target.value.substring(0, e.target.value.length-3);
// apply calculation for 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);
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论