The thumb of the range input is misaligned with the axis markers

The handle, also known as the knob in this input[type=range] codepen, is not aligning correctly with the ticks. It appears to be off by varying amounts (either left or right) depending on the value. Move the handle to see for yourself. What CSS properties can I apply to make sure the handle lines up accurately with the current tick and works for all ticks on the axis?

input.range {
  -webkit-appearance: none;
  bottom: -10px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
input.range:focus {
  outline: 0;
}
...
</fieldset>

htmlcssinputsassinput-type-range

Answer №1

Don't forget to consider the thumb's width in relation to the track edge.

To address this issue, wrap both of your svg elements in a div, and then add padding on each side that is exactly half of the thumb's width.

Update your HTML:

<fieldset class="range__field">
    <input class="range" type="range" min="0" max="10" />
    <div class="timeline-wrapper">
        <!-- svgs go here -->
    </div>
</fieldset>

Add to CSS:

.timeline-wrapper {
    padding: 0 10px;
}


Your updated CSS code snippet...
Your updated HTML code snippet...

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

Tips for displaying the initial slide when a tab is loaded on a multi-tab webpage

I have a total of four tabs, with the first tab containing a slideshow. On page load, I am successfully triggering the first tab, but for some reason, the first slide in the slideshow within that tab is displaying a blank image. I'm struggling to find ...

javascriptphphtmlajax

Creating a receipt program in Python and protecting previous data from being overwritten

I am currently learning Python and attempting to create a program that generates an invoice listing all items, along with their prices and quantities. Each item should be displayed on a separate line. While I have managed to print each item in a line, I a ...

pythoncsspython-3.xwhile-loop

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

htmlrotationcss

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

htmlcssflexbox

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

javascripthtmljson

How can you align square cells within a container using CSS grids while maintaining a consistent grid gap?

Our objective is to perfectly align square cells with the edges of their container while maintaining a consistent gap between cells in each row and column. Although this Codepen solution is close, there are two key issues: (1) vertical spacing doesn' ...

htmlcsscss-grid

Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif The main feature should be a large video placeholder at the top, followed by several thu ...

javascriptjqueryhtmlcss

Issues with CSS transitions not functioning properly following the use of toggleClass()

I recently implemented a toggle-menu feature, which you can see in action on this demo. To enhance the toggle-menu, I added a CSS transition effect to div.nav-menu, utilizing max-height:0; and increasing it to max-height:480px;. However, after clicking t ...

jquerycsscss-transitions

Beside the element, a dropdown navigation menu emerges

Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I ...

htmlcss

Having difficulty customizing the background color of a navbar using CSS in Bootstrap 5

I've been attempting to customize the color of the navbar using a custom CSS code, but unfortunately without success. I've searched through various resources and tried different class names like navbar, navbar-custom, and more, but none seem to w ...

htmlcssbootstrap-5

Ensure that the HTML image and text are positioned side by side, with the text appearing alongside the picture rather than below

Looking for a way to keep the text aligned to the right of an image, regardless of length? Check out this exercise: https://www.example.com/css/exercise-1 Is there a method to maintain the text layout next to an image while accommodating varying amounts o ...

htmlcss

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

phphtmlcss

Preventing a Click Event on Child Element from Triggering the Parent's Click Event in jQuery

Can you help me figure out how to prevent a button from executing the onclick function of its parent div in this example? <div onclick="$('#extra-info').slideToggle();" class="card card-body item"> <div class="ro ...

javascripthtmljqueryonclick

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the cl ...

csscss-animationskeyframe

Fade out at varying speeds

As I delve into CSS3 animations, I have been experimenting with some example code. Here is the link to the code: http://jsfiddle.net/chricholson/z7Bg6/67/ I am curious about how to adjust the duration of animations when un-hovering. Currently, it seems th ...

htmlcss

How can I retrieve a text file using an API in a Next.js application?

Is there a way to download a text file using an API in Next.js? The console.log(ninjas) function is already displaying the correct information. I have tested the API with Postman and it works perfectly. When I use GET in Postman, the same information is ...

javascripthtmlnode.jsapinext.js

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

htmlcssflexbox

Issue with retrieving the current location while the map is being dragged

How can I retrieve the current latitude and longitude coordinates when the map is dragged? I've tried using the following code: google.maps.event.addListener(map, 'drag', function(event) { addMarker(event.latLng.lat(), event.la ...

javascripthtmlasp.net.netgoogle-maps