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

swap the positions of two distinct texts

I need to dynamically change the positions of two texts based on the text direction (LTR or RTL) using CSS specifically for an email template. Here is the code snippet I am working with: '<span style="font-weight:bold; text-align: center;">US ...

css

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

javascriptjqueryhtml

Accessing the parent element within a hover declaration without explicitly naming it

I am facing a challenge with three nested divs, where I want to change the color of the children when the parent is hovered. However, I prefer not to assign a specific class name to the parent element. The issue arises because the children have their own ...

cssreactjs

Achieving proper variable-string equality in Angular.js

In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...

javascripthtmlangularjs

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...

javascripthtmljquerycsstwitter-bootstrap

The index.html file is not displaying correctly on a servlet 3.0 configuration with Tomcat

I am currently working on a basic web application using Servlet 3.0 with Tomcat 7.0.25, and deploying the application as a war file named mywebapp.war. The structure of the war file is as follows: mywebapp/index.html mywebapp/META-INF/MANIFEST.MF myweba ...

javahtmltomcatservlet-3.0

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

phphtmlcodeigniter

Guide on displaying Adsense ads specifically for mobile devices

Can anyone provide me with a proper method to show/hide my AdSense ads on both mobile and desktop? I am currently using a method that results in 2 console errors. Here is the current approach: We are utilizing two classes, "mobileShow" and "mobileno," t ...

cssmobiledesktopadsense

Bootstrap 4 Card Body Spinner Overlay with Flex Alignment

Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body. Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something. I've double-checked the display types and ...

javascripthtmlcssflexboxbootstrap-4

Eliminating the use of <ul> <li> tag within the validation-summary-errors

I am facing an issue with a website where the error message is displaying in a specific format. <div class="validation-summary-errors"> <span>Password change was unsuccessful. Please correct the errors and try again.</span> <u ...

css

Issue with symbol not rendering correctly in Email Body when setting width to '100%' in Postman

I'm currently working on sending emails using APIS in NodeJS. The issue I am facing is related to the CSS code with '%' symbols triggering errors when attempting to send the email via Postman, resulting in a 500 error. However, removing the ...

htmlcssnode.jspostmanemail-client

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

Tips for aligning an image in the middle of a column within an ExtJS GridPanel

My goal is to center the icon horizontally within the "Data" column: Currently, I have applied textAlign: center to the column: Additionally, I am using CSS in the icon renderer function to horizontally center it: Despite these efforts, the icon remains ...

javascriptcssextjs

Obtain the URL path for accessing URL links using PHP

To obtain the URL of an image, I typically use this code on the main websites: <a href="./index.html"><img src="./images/logo.png" class="" alt=""></a> However, for sub-sites, I need to use a slightly different approach: <a href=".. ...

phphtmlheaderfootergeturl

Tips for avoiding divs from overlapping when the window size is modified

When I maximize the browser, everything aligns perfectly as planned. However, resizing the window causes my divs to overlap. Despite trying several similar posts on this issue without success, I have decided to share my own code. CODE: $(document).read ...

javascriptjqueryhtmlcss

I'm attempting to slightly adjust the alignment of the text to the center, but it keeps causing the text to shift

I am facing an issue where I want to slightly center text, but whenever I add just 1px of padding-left, it moves to a new line. In my layout, I have 2 columns each occupying 50% width of the screen. One column contains only a photo while the other has a ba ...

htmlcss

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

pythonhtmlflaskneo4jazure-virtual-machine

Tips on creating a keypress function for a div element with the contenteditable attribute

Hey there, I have managed to create a textarea within a div by using -webkit-appearance. However, I am currently struggling to add an event to this div on key press. I have been trying my best to figure it out but seem to be missing something. If you coul ...

javascriptphpjqueryhtmlcss

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...

htmlcsszurb-foundation