Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels.

CSS

.myrange::-webkit-slider-thumb{
     position:relative;
     top:-5px;
     appearance:none;
     -webkit-appearance:none;
     -webkit-transition: width 2s, height 4s;
     transition: width 2s, height 4s;
     border-radius:50px;
     background-color:rgb(9,90,0);
     border:0;
     cursor:pointer;
     visibility:hidden;
}

JavaScript

var styleElement = $("<style>", {"type": "text/css"}).appendTo("head");
$('.myrange').hover(function(){
    styleElement.text('.myrange::-webkit-slider-thumb{height:12px; width:12px;}');
});
javascriptjquerycsshtmlcss-transitions

Answer №1

To ensure the styling of the thumb on your range element, remember to include -webkit-appearance: none in the entire range element. Additionally, you can achieve this without using jquery.

.custom-range {
 -webkit-appearance: none; 
 height:10px;
 width:200px;
 background-color:#e3f2fd;
}

.custom-range::-webkit-slider-thumb {
  height: 10px;
  width: 10px;
  background: #33aaff;
  cursor: pointer;
  -webkit-appearance: none;
  transition: height .2s ease-in-out;
}

input[type=range]:hover::-webkit-slider-thumb {
  height: 30px;
}
<input type="range" class="custom-range" value="50">

Answer №2

Here is a solution for you!

$('input').mouseenter(function() {
  $('input').toggleClass('over');
});
$('input').mouseleave(function() {
  $('input').toggleClass('over');
})
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range].over::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
}

/* All the same stuff for Firefox */
input[type=range].over::-moz-range-thumb {
  height: 12px;
  width: 12px;
}

/* All the same stuff for IE */
input[type=range].over::-ms-thumb {
  height: 12px;
  width: 12px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #3071a9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #3071a9;
}
input[type=range].over::-webkit-slider-runnable-track {
  height: 6px;
}
input[type=range].over::-moz-range-track {
  height: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='range'>

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

Vue with DevXtreme DataGrid

Currently, I am working on creating a table using DataGrid in Vue. My goal is to populate the table with data from a v-for loop. However, I am facing some challenges in displaying the values such as {{user.name}}, {{user.email}}, and {{rol.name}}. As a beg ...

javascriptvue.jsv-for

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver

What steps can be taken to guarantee that React updates occur in the correct order?

I'm currently working on developing a multi-select dropdown and facing the issue of hiding the options once a user selects one. The problem arises when I try to update the selectedCategoriesData state and then hide the dropdown using setShowCategories ...

javascriptreactjs

Exploring AngularJS's capabilities with asynchronous tasks

I am in the process of developing a simple app using AngularJS. One of the key functionalities I am working on is removing items from a list. To achieve this, I have created the following code snippet: $scope.removeItem = function(item) { var toRemove = ...

javascriptangularjsasynchronous

Utilize [markdown links](https://www.markdownguide.org/basic-syntax/#

I have a lengthy text saved in a string and I am looking to swap out certain words in the text with a highlighted version or a markdown link that directs to a glossary page explaining those specific words. The words needing replacement are contained within ...

javascriptreactjstypescriptstringnext.js

Why doesn't the float extend across my entire background?

One issue I am facing is with two divs in my HTML file, both set to 50% width. The left div has a fixed position while the right div should be scrolling. I have set it to float, but there seems to be a white space around the background of the floating div: ...

htmlcss

the navigate feature is not redirecting to the intended page as expected

I am currently working on a React application and facing an issue with configuring the navigation. The problem lies in the code of the Navbar component, where upon clicking the logout button, the authentication context should be cleared and the user should ...

javascriptreactjsreact-routerreact-router-dom

Transmit the document to Django using Ajax

I am encountering an issue when trying to send an image using an AJAX request to Django. Below is the HTML code I am using: <form> <input type="file" id="files" name="image"> </form> Next, here is the corresponding JavaScript code: var ...

javascriptajaxdjango

Is there a way to modify certain parameters of a plugin without the need to directly edit the

Is there a way to modify certain parameters of a plugin without directly editing it? You can find the link to the plugin here: . Can we include an additional script to override specific parameters of the above script, such as setting displayTime to 1000 ...

javascriptjquerypluginsjquery-plugins

Can I simultaneously utilize submit and ajax functions?

As I work on CRUD for our website, the approach we are taking involves using submit. However, there are occasions where I need to pass data from a JS file to my controller (I am using Codeigniter). I am now considering whether it is common practice to do ...

javascriptphpajaxcodeignitercodeigniter-3

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...

javascriptjqueryhtmlcss

Trouble with executing jQuery $.ajax post to PHP within the same file

Here is the code snippet: <script> $( document ).ready(function() { $( ".button" ).click(function() { var clickBtnValue = $(this).val(); $.ajax({ //url: '', // url is empty because I'm working in the ...

phpjqueryhtmlajax

Modify the state from a listener that is enclosed in the useEffect function

Within my hook called useQueryEvents, I have a setup that involves fetching all past transactions for a user and listening to the network for incoming/outgoing transactions. These transactions are then passed into a function called addActionToActivity, whi ...

javascriptreactjsreact-nativelistener

"Unlocking the secret to fetching the id of the clicked element within a Highchart context menu

Is it possible to retrieve the id of a clicked button on the highchart context menu? Alternatively, is there a way to execute the click function twice? const contextButtonArray = []; contextButtonArray.push({ { text: 'TEST BUTTON&ap ...

javascriptjqueryhighcharts

What is the best way to display a webpage within an iOS app using PhoneGap?

In my iOS phonegap app, I am looking to have a single view that displays a web page. Can someone guide me on how to load this specific view with a particular URL using JavaScript? Although I primarily develop native iOS applications and do not have expert ...

javascripthtmliosurlcordova

Unexpected behavior with scrollTop

Note Reopening bounty as I forgot to award it last time. This question has already been answered by Master A.Woff. I am looking for a way to automatically scroll to a specific row when a user expands it, so that the content is immediately visible witho ...

javascriptjquery

Retrieving the output from a nested scope within a function

I have a scenario where I am working with a function that has a nested "then" function containing a return statement. My goal is to combine this inner return data with the outer return data. Below is the code snippet: public async getAllWidgets(): Promis ...

javascriptreactjstypescript

Displaying a text in a Django template as a JSON entity

I am currently facing a challenge with an angular app that sends JSON data to a Django backend. The Django application saves the JSON data into a database and later retrieves it to send it back to the angular app. However, I am struggling to get this entir ...

javascriptdjangojinja2

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

Can anyone help me find a solution to prevent the following issue: /** * This is a comment */ function foo() { ... } I need it to be corrected and formatted like this: /** * This is a comment */ function foo() { ... } ...

javascripttypescripteslint

Functionality that can be utilized repeatedly

I've been struggling to implement a feature for repeatable blocks in my web form. The issue I'm facing is that when I click the buttons, nothing happens even though they work fine when tested in the console. I've been stuck on this problem f ...

javascriptjqueryhtml