I'm struggling with aligning an arrow above a range slider thumb that follows its position and animates along with it. The challenge arises when the slider becomes responsive, causing the arrow to move inconsistently.
Currently, I have utilized CSS for positioning the arrow and implementing the animation effects.
If you have any suggestions or solutions to ensure the arrow stays consistently above the thumb, I would greatly appreciate your input!
Understanding the placement of notches on a slider is more intricate than using simple percentage values:
The slider-thumb has specific dimensions, like 28px in your scenario.
Additionally, there are gaps before the first notch and after the last one...
The arrow icon also contributes to the width!
This makes calculating alignment quite complex...
I couldn't find a universal formula for all cases. However, by utilizing calc() with a mix of "logical percentage" and pixel offset, you can achieve accurate positioning that remains responsive. It may require some trial and error to determine the correct offset.
Here are the specific lines I modified from your code snippet:
input[aria-valuenow='1'] + .range-slider-output::before {
left: 11px;
}
input[aria-valuenow='2'] + .range-slider-output::before {
left: calc(33.3% - 4px);
}
input[aria-valuenow='3'] + .range-slider-output::before {
left: calc(66.6% - 20px);
}
input[aria-valuenow='4'] + .range-slider-output::before {
left: calc(100% - 36px);
}
I've included bootstrap files as well (which were present in your fiddle).
Updated Fiddle
Working snippet
I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...
I've been struggling to click on a login element despite trying various methods. The source code is provided below for reference: Source code: <div ng-hide="IsXmlPunchOut()" class="myaccount ng-scope"> <div ng-click="Login()" class="myacc ...
I'm developing a website that dynamically displays a data table based on the name you click. To start, here is the main page: random.html <body> <a href="#" id="comp1">comp1</a> <a href="#" id="comp2">comp2</a> <a hre ...
I'm currently facing an issue with a JavaScript variable that I am trying to initialize within another function using a for loop: var test = { det: [{x: -1, y: -1}] }; for (var i = 0; i < 4; i++) { test.det.push({x:10+i, ...
I placed my view.blade.php file in resources\views\admin\login\view.blade.php and used the following code to link it to the CSS file: <link href="{!! HTML::style('css/style.css') !!}" rel="stylesheet">. My CSS file is lo ...
I have a customer in China who needs a specific captcha that functions there. You can find the captcha I need to use at this link: Essentially, there are 4 steps to make it work: Add this line to the label of your html: <script src="https://ssl.ca ...
Currently utilizing Bootstrap and jQuery for my project. Encountering an issue where pressing the enter key after filling in the tracking field does not trigger any action, as I am not using the form attribute. However, when I input something and click the ...
Given the provided website URL and locators: XPATH CONTAINER = (By.XPATH, '//ul[@class="bottom-nav"]') MENU = (By.XPATH, '//li[contains(@class, "menu-item")]') CSS BOTTOM_NAV = (By.CSS_SELECTOR, '.bottom-nav&a ...
Using Angular-translate with partial-loader, I am looking to hide the translate key upon page load in app.js. var app = angular.module('myapp', [ 'ngRoute', 'appRoutes', 'pascalprecht.translate', ...
My HTML code consists of a jQuery script and a button that triggers a function to display random answers. However, after clicking the button once, the answers cycle automatically without any input. I want each click to show a different answer. What could ...
Here's the scenario: I have an array of reference / ObjectIds and I need to delete elements from it based on a specific field in the reference object. Let's consider the schemas below: const UserSchema = new mongoose.Schema({ firstName: Strin ...
I'm encountering an issue with my nextJS application. React is rendering my components twice, and I suspect it's due to the presence of StrictMode. However, the official documentation for React and nextJS strongly recommends utilizing StrictMode. ...
I'm currently updating an old web application using jQuery. Within the form, there are 40 buttons that trigger a confirmation prompt using javascript confirm. I aim to replace these with jquery modal dialogues. While I've successfully implement ...
I've been delving into JavaScript with the guidance of "Morten Rand-Hendriksen" on LinkedIn Learning. The instructor emphasized the importance of installing "Prettier" in our VSCode environment. Following his instructions, I headed to the "Extensions" ...
How can I create a CSS drawing of an <hr> line with a button positioned at the center that cuts the line in half? ...
I'm currently developing a PHP script that dynamically generates tables in MySQL based on user input for the number of rows and columns. The data is being sent to the server using AJAX, but even though the transmission is successful, the server is rec ...
After triggering specific actions to update an array of objects in my global state, I want to send a PUT request to my Firebase database. This action can involve adding, deleting, or editing objects within the array, and I need to initiate the request righ ...
I am currently developing an HTML5 Mobile App where I have implemented panels as pages in the following way: <div class="upage panel" id="account_page" data-header="af-header-4" data-footer="none"> Additionally, I have created a login page structur ...
I'm looking to display an error message using alert() if there's an error in my PHP script. Can anyone provide guidance on how to achieve this? ...
The promise mentioned below should ideally return the customer and blox slot as part of the booking record in the second .then(). However, it seems that addCustomer and addBooking have not been executed yet. When I added await to addBooking or addCustomer ...