Question 359412 in Html Question posted in
Some basic documentation can be found here.

Html – How do I select a value using the slide bar?

Can someone please help me with this project I am working on? I want to select either one of the two divs (KgDiv, LDiv) by clicking it, then use the slide bar to select a value between 0 and the maximum value of the Kilograms/ Liters paragraph, then use the Sell button to convert Kg or L to € at a rate of 1 to 1. Also the quantity (kg or l) selected using the slide var should be displayed next to the slide bar.

var KilogramsV = 0;
var LitersV = 0;

function AddKg() {
  KilogramsV += 400;
  document.getElementById("Kilograms").innerHTML = KilogramsV + " " + "Kilograms";
}

function AddL() {
  LitersV += 340;
  document.getElementById("Liters").innerHTML = LitersV + " " + "Liters";
}
<div id="KgDiv">
  <p id="Kilograms">Kilograms</p>
  <input type="button" onClick="AddKg()" value="+400Kg"></input>
</div>
<div id="LDiv">
  <p id="Liters">Liters</p>
  <input type="button" onClick="AddL()" value="+340L"></input>
</div>

<input type="button" onClick="Sell()" value="Sell"></input>
<p id="Money">€ 0</p>

<input id="SlideBar" type="range" min="0" max="100" value="50"></input>

This is what I have so far.
Thanks!

I have watched yt videos but couldn’t find anything helpful.

Tags:

2

Answers


  1. 0

    I really didn’t get what you were trying to say. All I added to your code was that it shows the value of the slider under the slider. Please reply to this and tell me when else you need. Also, if this helped, mark this as the correct answer.

    var KilogramsV = 0;
var LitersV = 0;
var sliderValue = 0;
function AddKg() {
  KilogramsV += 400;
  document.getElementById("Kilograms").innerHTML = KilogramsV + " " + "Kilograms";
}

function AddL() {
  LitersV += 340;
  document.getElementById("Liters").innerHTML = LitersV + " " + "Liters";
}
function sliderChange(val) {
    document.getElementById('slider').innerHTML = val;
    sliderValue = val;
}
    <div id="KgDiv">
  <p id="Kilograms">Kilograms</p>
  <input type="button" onClick="AddKg()" value="+400Kg"></input>
</div>
<div id="LDiv">
  <p id="Liters">Liters</p>
  <input type="button" onClick="AddL()" value="+340L"></input>
</div>

<input type="button" onClick="Sell()" value="Sell"></input>
<p id="Money">€ 0</p>

<input id="SlideBar" type="range" min="0" max="100" value="50" oninput="sliderChange(this.value)"></input>
<p id="slider"> 50 </p>
    Login or Signup to reply.
  2. 0

    To achieve your goal, we should be modifying your code and add some more JavaScript.

    var kilogramsV = 0;
var litersV = 0;
var selectedType = 'kg'; // Default selection

function addKg() {
  kilogramsV += 400;
  document.getElementById("Kilograms").innerHTML = kilogramsV + " Kilograms";
  if (selectedType === 'kg') {
    updateSliderMax(kilogramsV);
  }
}

function addL() {
  litersV += 340;
  document.getElementById("Liters").innerHTML = litersV + " Liters";
  if (selectedType === 'l') {
    updateSliderMax(litersV);
  }
}

function selectType(type) {
  selectedType = type;
  const selectionText = type === 'kg' ? 'Kilograms' : 'Liters';
  document.getElementById("ActiveSelection").innerHTML = `Active: ${selectionText}`;
  updateSliderMax(type === 'kg' ? kilogramsV : litersV);
}

function updateSliderMax(maxValue) {
  document.getElementById("SlideBar").max = maxValue;
  document.getElementById("SlideBar").value = 0; // Reset the slider value
  updateQuantity(0); // Reset the displayed quantity
}

function updateQuantity(value) {
  document.getElementById("SelectedQuantity").innerHTML = `Selected: ${value} ${selectedType.toUpperCase()}`;
}

function sell() {
  var quantity = document.getElementById("SlideBar").value;
  var money = parseInt(quantity); // Since 1 kg/l = 1 €
  document.getElementById("Money").innerHTML = '€ ' + money;
}
    <div id="KgDiv" onclick="selectType('kg')">
  <p id="Kilograms">Kilograms</p>
  <input type="button" onclick="addKg()" value="+400Kg">
</div>
<div id="LDiv" onclick="selectType('l')">
  <p id="Liters">Liters</p>
  <input type="button" onclick="addL()" value="+340L">
</div>

<p id="SelectedQuantity">Selected: 0 Kg</p>
<input type="button" onclick="sell()" value="Sell">
<p id="Money">€ 0</p>

<p id="ActiveSelection">Active: None</p> <!-- Indicates active selection -->

<input id="SlideBar" type="range" min="0" max="100" value="0" oninput="updateQuantity(this.value)">

    What these codes do?

    • selectType(type) function sets which type of unit is active and prints it to the end user.
    • updateSliderMax(maxValue) function updates the max value of the slider based on the selected type’s total amount and resets the slider and selected quantity display.
    • updateQuantity(value) function updates the text next to the slider to display the currently selected quantity along with the correct unit (Kg or L).
    • sell() function converts the selected quantity into euros at a 1:1 rate and updates the "Money" paragraph to display the total amount in euros.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search