Display the input type range thumb when hovering over it

Hey there, I have a quick question - how can I make the slider thumb for an input type "range" appear when hovering over the slider bar? I've tried some code but it doesn't seem to be working properly.

The ID of the slider bar is 'progressbar'.

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 26px;
    height: 3px;
    width: 170px;
    background-color: rgb(74,123,197);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    visibility: visible;
}

#progressbar:hover input[type="range"]::-webkit-slider-thumb {
    visibility: visible;
}

Thank you in advance for any help!

css

Answer №1

Does this look similar to what you're seeking?

HTML:

<div id="progressbar">
    <input type="range" min="10" max="100">
</div>

CSS:

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 26px;
    height: 3px;
    width: 170px;
    background-color: rgb(74, 123, 197);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
}
#progressbar:hover input[type="range"]::-webkit-slider-thumb {
    width:20px;
    height: 20px;
    border: 1px solid blue;
    border-radius: 50%;
    background: #fff;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

Fiddle: http://jsfiddle.net/Y7eF4/8/

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

Combining HTML/CSS to overlay text on an image - EMAIL

Why does Google keep stripping my <style> tag when I try to overlay text on an image? I want the image to be on the left with two text blocks positioned over it on the right (one higher and one lower). It looks fine visually, but when I send it to m ...

htmlcsshtml-email

Tips on keeping the cursor constant in CSS margins

Currently, I have a div that has a width of 160px and a height of 80px. Strangely enough, the div also has a margin-left of 540px. Additionally, in my CSS, I've specified cursor:pointer. The issue arises when I move my cursor to the left of the div, ...

htmlcssmarginmouse-cursor

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

I am facing an issue where adding body tags to my code in Visual Studio code does not yield the desired results. Interestingly, it doesn't seem to be a syntax error in CSS. body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI&apo ...

htmlcss

Engage the PROTRACTOR refresh function

I'm just getting started with automation and Protractor. I successfully automated the login page, but now I'm facing a challenge with accessing a menu that I need in order to navigate to a different page. Within the menu, there is an href="#/dom ...

javascriptcssangularjsprotractor

Faulty Container - Excessive spacing issues

https://i.sstatic.net/Sp23W.png Currently enrolled in a Udemy course on Full Stack Development from scratch. The instructor often makes mistakes that require improvisation, like using <span> instead of <p> next to the sign-in. Additionally, ad ...

htmlcss

The sticky footer in React shifts upwards when the page has minimal content

Having trouble with my web app's footer not staying at the bottom when there is minimal content on the page. I'm feeling stuck and unsure of how to proceed. Can anyone provide guidance on creating a footer that remains at the bottom of the page, ...

cssreactjs

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

htmlcssreactjs

What is the method for eliminating <ol> elements that have a particular number of <

As a beginner in the world of html and css, I am reaching out for some assistance. My question is regarding how to remove the ol tags that contain 3 li elements without any class or id. Here is an example: <div class="text"> <ol> ...

jqueryhtmlcss

Troubleshooting: Font-Awesome Symbols are not Showing up

I am facing an issue where the font-awesome social media icons are not displaying on any browser. However, all other icons appear to be working without any problems. I have attached a screenshot of the page open in Mozilla with inspect element (you can ...

csshtmlfont-awesome

Begin jQuery animation promptly without any easing

When utilizing the given Jquery example in Chrome, the easing effect during the mouseenter event causes a brief pause in the animation. Is there a way to trigger the animation to start immediately? The intended outcome is for the animation to shift move c ...

jqueryhtmlcssjquery-animate

Tips on adding CSS to a React component

I've successfully converted an HTML file into a component designed to resemble a 7-segment LED display. I have imported the necessary CSS styles from the index.css file, but I am unsure how to properly apply these styles within the component. My atte ...

htmlcssreactjs

Is there a way for me to modify the position of a cursor graphic?

Similar Question: Custom cursor interaction point - CSS / JQuery I've been experimenting with changing the image of the mouse pointer by using the CSS cursor property ("cursor: url(images/target.png), crosshair;") and have observed that when a us ...

css

Customizing checkbox appearance without including a label

After following a tutorial on how to style checkboxes found here, I was able to create a custom styled checkbox. However, I noticed that when I removed the label from the checkbox, it disappeared and was no longer visible. Is there a way to display the c ...

htmlcsscheckbox

Question About jQuery and CSS3

Can someone suggest an effective method for modifying CSS3 with jQuery? I was thinking of using a selector like this: $("#con_back").css('-webkit-border-top-right-radius','0px'); $("#con_back").css('border-top-right-radius', ...

jquerycss

In the Swiper function of JavaScript within a Django template, the occurrence of duplicate elements (products) is being generated

Experimenting with displaying products in a Django template, I decided to utilize the Swiper js class. This allowed me to showcase the products within a div, complete with navigation buttons for scrolling horizontally. However, when testing this setup wit ...

javascripthtmlcssdjangoswiper.js

The Bootstrap toast feature does not seem to be functioning properly within the context of

I am facing an issue with my datatable table where the Bootstrap toast component is not working correctly when placed above the table due to the backdrop-filter property. The toast functions normally when placed within any other element except for the tab ...

jquerycssbootstrap-4datatables

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Is it possible to move the Material UI TableSortLabel Arrow to the opposite side?

My table has columns that are both right aligned and left aligned, and I need them sorted. When the column is right aligned, I would like the sorting icon to be on the left side of the header. Otherwise, there is an awkward empty space where the icon shoul ...

cssreactjsmaterial-ui

The arrow icon on the select control is not showing up as expected in a form that is using Bootstrap when viewed in the

On my form using Bootstrap with Firefox browser, the select control is missing its arrow icon on the right side: https://i.sstatic.net/HcFf6.png The HTML code I used for this element is as follows: <div class="container-fluid"> <form id="fo ...

htmlcsstwitter-bootstrap

The props are not receiving the margin property

I am working on a styled component that needs to receive a prop to determine if it should have a margin on the left or right. It seems that there is a syntax issue that I am struggling with. Here is the code snippet: const FormDiv = styled.div` displa ...

cssreactjsstyled-components