Display the user's input value in a tooltip without using jQuery

I am looking to achieve this particular layout design. https://i.stack.imgur.com/p9UTH.jpg I am unsure about how to display the input value in the bubble within this layout.

The visibility of the bubble should only be triggered on hover.

Below is the code snippet:

<div class="control__wrapper">
    <input type="range" min="1" max="4" steps="1" value="4" class="range">
    //<span class="thum"></span> 
</div>

.control__wrapper{
    width:100px;
    position:relative;
}
.range{
    width:100px;
    -webkit-appearance: none;
    -ms-vertical-align:-10px;
}
.range:focus{
    outline:none;
}

.range::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: #ddd;
}
.range::-webkit-slider-thumb {
    border: 1px solid black;
    height: 15px;
    width: 10px;
    background: #eee;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px; 
}
.range:focus::-webkit-slider-runnable-track {
    background: #ddd;
}
javascripthtmlcss

Answer №1

Give this a shot 

<span id="outputValue"></span>
<input type="range" min="5" max="10" step="1" oninput="displayValue(this.value)" onchange="displayValue(this.value)"

To ensure compatibility across different browsers, both events are necessary

Answer №2

Using JavaScript is a great option for this task, as you can easily access the input element and attach an event listener to it. When the user adjusts the slider, the following code will display the updated value.

var sliderInput = document.querySelector(".slider");
sliderInput.addEventListener('input', function() {
    console.log(this.value);
});

Answer №3

If you have already obtained the bubble element using document.getElementById("") or document.getElementsByClassName(""), let's refer to it as bubbleEl.

Next, we need to establish the behavior for the hover action. This can be achieved by using oninput and onchange within the <script> tag or by adding an event listener. In either case, you can pass "this.value" to another function called showVal(inputValue).


showVal(inputVal){
  bubbleEl.innerHTML = inputVal
}

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

React's Conditional Rendering

Let's imagine having these initial conditions: this.state = {plans: [], phase: 'daybreak'} along with a dynamic JSON object fetched from an API containing various schedules that may change periodically, for example: plans = {"daybreak": " ...

javascriptarraysjsonreactjsreact-native

Internet Explorer and CSS: How to eliminate a highlight that pops up when the button is clicked

Could you please check out this website in Internet Explorer (I've tried it on the latest version as well as older versions.) On the above link, there are two circular buttons at the bottom of the page. In IE, when you click on a button, a semi-trans ...

htmlcssinternet-explorerhighlight

When using jQuery, the PHP variable value is not retrieved from the DIV data-id attribute, instead it just displays the variable name

I currently have the following code: <div class= "obutton feature2" data-id=".$bookID."><button>Reserve Book</button></div> <div class="modal-box"></div> Although this button triggers the jQuery script, the modal box ...

javascriptphpjqueryhtml

What's the process for browsers to render the 'span' element?

<p> <span>cancel</span><span>confirm</span> </p> <hr> <p> <span>cancel</span> <span>confirm</span> </p> Both should display the same result. However, in the ...

htmlcss

What techniques do Python and Javascript use to handle resizing of arrays?

What methods do programming languages like JavaScript and Python use to resize arrays compared to Java? For example, when adding an element to a 10-index array, Java typically doubles the size of the array while languages such as JS and Python may utilize ...

javascriptpythonarraysperformancememory

Struggling to use the innerHTML method to update a div within another div element?

<!DOCTYPE html> <html> <head> <title>Business Information Card</title> <script type="text/javascript"> window.onload = init; function init(){ var button = document.getElementById("populate ...

javascripthtmldominnerhtml

What is the most effective way for server.js to send a request to a controller?

When I need to send data from a controller to my main server.js, I typically use the following method: $http.post('/auth/signup', user); This code is executed in the controller: app.post('/auth/signup', function(req, res, next) The ...

javascriptnode.jsangularjsexpress

jQuery: Track mouse movement with a delay

I'm looking to create a div that follows cursor movement with a slight delay, similar to the effect seen on this website: In the example link provided, you can observe that the 'follower' has a brief delay in its animation. I attempted to ...

javascriptjquerymouseeventmousemove

Update a BehaviourSubject's value using an Observable

Exploring options for improving this code: This is currently how I handle the observable data: this.observable$.pipe(take(1)).subscribe((observableValue) => { this.behaviourSubject$.next(observableValue); }); When I say improve, I mean finding a wa ...

javascriptangulartypescriptrxjs

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

csstwitter-bootstrapbootstrap-4

`"Unable to execute the 'ng build --env=prod' command"`

I have a JavaScript website that I need to rebuild with some changes I made. In order to build the application, I was instructed to run this command from the source files directory: ng build –env=prod However, when I try to do so, I keep encountering t ...

javascriptnode.jsangularnpmbuild

Dragging and dropping elements using Jquery to various positions on the screen

I am working on a project with draggable buttons and a droppable textarea. When I drag a button onto the textarea, it displays some code. If I drag another button, the text related to that button is added to the existing code. My query is how can I insert ...

javascriptjqueryhtmlcssjquery-ui

Prevent displaying page confirmation prompts when a user clicks on hyperlinks

One way to display a confirmation message when a user tries to leave the current page is by using this method: window.addEventListener("beforeunload", function (e) { var confirmationMessage = "Are you sure you want to leave?"; ...

javascript

Codeigniter dropdown sending incorrect value to controller

When I choose an option from the dropdown list and click the submit button in the modal, the selected value is not being posted to the controller as expected. Below is my view code: <div class="form-group"> <div class="col-md-4"> ...

javascriptphpjqueryajaxcodeigniter

Encountering [Object] error in Angular's ngbTypeahead functionality

Here is the code for my input field in component.html: <input type="text" class="form-control" [(ngModel)]="searchQuery" [ngbTypeahead]="recommends" name="searchQuery" typeaheadOptionField="user ...

htmlnode.jsangulartypescriptng-bootstrap

Picture is unavailable for viewing - (Express, Pugjs)

I'm having trouble getting an image to display on my page using a pug template. Despite following the setup and files correctly, the image still isn't showing up. Here is what I have: index.js app.use('/images', express.static(path.r ...

javascriptexpresspugpugjs

What steps do I need to take to translate jQuery code into standard JavaScript code?

Can someone please help me convert this jQuery code to plain JavaScript? window.addEventListener('scroll', function() { document.querySelectorAll('.container p').forEach(function(el) { var scrollTop = window.scrollY, ...

javascriptjquery

TinyMCE's Textarea is blank and not displaying any content

I can't seem to figure out where I went wrong with using TinyMCE. I downloaded it from and chose version 4.0.3. After downloading, I ended up with a folder called tinymce_4.0.3 which contained subfolders like tinymce_4.0.3\tinymce\js\t ...

javascripthtmltinymce

Create a CSS animation that causes a div element to smoothly float out of the document

I want to add a CSS animation featuring clouds moving from left to right. In my design, I have a div with a 100% width containing cloud images styled with "position:absolute". My initial approach was simple: create an animation that gradually changes the " ...

htmlcsscss-animations

Error encountered when utilizing a specialized jQuery extension: "not a function"

Every time I attempt to execute this function (function($) { $.fn.generateURLHash = function() { return document.URL.substr(document.URL.indexOf('#')+1); }; })(jQuery); when I call $.generateURLHash(), an error pops up in th ...

javascriptjquery