I'm looking to increase a specific value by a set amount each time there is an input event triggered

I have created a range slider, but I am facing an issue with the oninput event. I want to increment a specific amount whenever the slider is adjusted. For example, I want to increase the amount by $150 when the slider is at $2000, and by $45000 for a particular range on the slider. Can someone assist me in achieving this functionality? Any help would be greatly appreciated!

var range = document.getElementById("range");
var val = document.getElementById("value");
var vvv = document.getElementById("vvv");
var saved = document.getElementById("saved");
val.innerHTML = "$" + range.value + "K";

range.oninput = function() {
  val.innerHTML = "$" + this.value + "K";
}
html,
body,
...
...
...

<script src="https://kit.fontawesome.com/b99f2762a6.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="heading">
...
...
...

javascripthtmlcss

Answer №1

const constantVvvMultiplier = .03
const constantSavedMultiplier = .013
const templateFormat = (val) => {
  return `$${val}K`
}
userRange.oninput = function () {
  let value = Number(this.value)
  let inputVal = value
  let vvvVal = Math.floor(value * constantVvvMultiplier)
  let savedVal = Math.floor(value * constantSavedMultiplier)
  let inputTextVal = templateFormat(inputVal)
  let vvvTextVal = templateFormat(vvvVal)
  let savedTextVal = templateFormat(savedVal)
  valueOutput.innerHTML = inputTextVal
  vvvOutput.innerHTML = vvvTextVal
  savedOutput.innerHTML = savedTextVal
}

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

Show a dynamic modal with a widget displayed inside

I am facing an issue with my Angular.js website that is filled with a multitude of widgets. Each widget consists of a template.html file paired with a controller.js file to form an angular module. These widgets are utilized on a dashboard where users have ...

javascriptangularjstwitter-bootstrapangular-ui

The JSON key has been labeled as "valid", making it difficult to access in JavaScript as demonstrated in a JSfiddle example

Initially, I transformed a Plist file (XML formatted) into JSON using an online tool. Extracting the important data from this extensive JSON file was not a challenge. Utilizing this crucial data, I am reconstructing a new JSON file that is concise and cont ...

javascriptjson

Ensure that three spans are precisely aligned to occupy a single line

My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...

htmlcssresponsive-design

unitary incline division assemblage

I noticed a particular element in the design that is currently displayed with an image (png). However, I am facing limitations due to needing to make it adaptive. Can a gradient be used as a sub-element instead? background-image: linear-gradient(to left, ...

csslinear-gradients

Match rooms using Socket.io

I am utilizing the opentok and socket.io packages in an attempt to establish 2 distinct "groups". Successfully, I have managed to pair up individual users in a 1-to-1 relationship. However, my goal is to create two separate groups of users. For instance, ...

javascriptnode.jssocket.io

"Introduce a time delay for the hover effect on the navigation dropdown

I've been struggling to find a way to add a delay to this hover effect. If you visit , you'll see a menu at the top that displays panels when hovered over. The CSS code to make them appear is: #navigation li:hover > .panel { display: blo ...

jquerycss

The form post request cannot recognize the undefined variable

When attempting to send values through an HTML form and retrieve it in console.log, I encounter an error that says "TypeError: Cannot read property 'fName' of undefined," despite declaring it in the form name. signin.html : <!doctype html> ...

javascriptnode.jsexpress

Different ways to notify a React/Next.js page that Dark Mode has been switched?

I am in the process of creating my first basic Next.js and Tailwind app. The app includes a fixed header and a sidebar with a button to toggle between dark and light modes. To achieve this, I'm utilizing next-theme along with Tailwind, which has been ...

javascriptreactjsnext.jscytoscape.js

Is there a way to remain on the current page in WordPress after submitting a contact form?

I recently developed a personalized contact form within WordPress, utilizing PHP. The completed form successfully sends emails, but I am encountering an issue when users hit submit; instead of staying on the original page, they are redirected to a post pag ...

phpjqueryhtmlwordpressforms

The invocation of $.ajax does not work as a function

I'm encountering an issue when running npm start and trying to access the browser, I keep getting this error message in the stack trace. Error: $.ajax is not functioning properly at findLocation (G:\CodeBase\ExpressApp\routes\ind ...

javascriptjqueryajaxnode.js

After completing the Spotify authentication process using implicit grant in a React application, the redirection is not functioning as

I am working on integrating Spotify authentication using the implicit grant method as outlined in their documentation. I have implemented the relevant code into a React component and successfully logged into Spotify. However, I am facing an issue where the ...

javascriptreactjsauthenticationclientspotify

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Currently, I am working on a project that involves one main component and several child components. These components require custom CSS files as well as additional vendor CSS files. A challenge I encountered is that I cannot use the @import "path/to/css/fi ...

javascriptcssvue.js

What is the method to remove an authentication code from a JSON file using JavaScript?

Is there a way to delete something from a JSON file? Here is an example: The file I am working with is named test.json Before I delete the authentication code: { "auth": [ { "test": 944037 }, { "tester& ...

javascriptnode.jsjson

Transferring values from jQuery AJAX to Node.js

Is there a way to successfully pass a variable from jQuery to nodejs without getting the [object Object] response? I want to ensure that nodejs can return a string variable instead. $('.test').click(function(){ var tsId = "Hello World"; ...

javascriptjqueryajaxnode.jsexpress

ng-repeat not functioning properly with FileReader

Here is a look at how my view appears: <body ng-controller="AdminCtrl"> <img ng-repeat="pic in pics" ng-src="{{pic}}" /> <form ng-submit="postPic()"> <input id="photos" type="file" accept="image/*" multiple/> <button> ...

javascriptangularjsfilereader

Having trouble retrieving JSON data using http.get method, as the status returned is -1

I'm a beginner in AngularJS. I'm attempting to retrieve JSON data in my code using $http.get, but it's throwing an error and the status is showing as -1. What could be causing this issue? RecordApp.factory('recordaccess', [' ...

javascriptangularjsjsonhttpget

Fetching the "User ID" variable from localStorage to PHP with angularjs - a quick guide

My goal is to retrieve "Notes" based on the "userID" value. Here is my approach: I used angular.js to trigger the PHP function $scope.getData = function(){ $http.get( '../php/displayNotes.php' ).success(function(data){ $ ...

javascriptphpmysqlangularjsdatabase

"Transforming JSON data into structured key-value pairs using JavaScript

Develop a function named "json_filter" that accepts a JSON-formatted string as input. The accepted format is an array of objects, where each object contains keys for "mass," "density," "temperature," and "velocity," each mapped to a floating-point number. ...

javascriptjson

Converting a JSON object with numerical keys back to its original form

Recently diving into JavaScript programming, I find myself struggling with reversing the keys of a single JSON object. Here is the specific object that I'm attempting to reverse: {70: "a", 276: "b ", 277: "c ", 688: "d", 841: "e", 842: "f", 843: ...

javascriptjqueryjsonobjectreverse

Inline CSS alignment

While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference? I have applied the following CSS to both HTML structures: .time { position: relative; top:100px; heigh ...

layoutcss