A straightforward guide on utilizing data-attributes to achieve a linear-gradient background

considering the following input

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%);
}
<input class="prettyRange" type="range" name="capability" data-percent="100%">

However, attempting to adjust the % using attr(data-percent) proves unsuccessful.

background: -webkit-linear-gradient(right, #fff 0%, green attr(data-percent), #fff 0%)

Is there a way to utilize the data-percent attribute of the element?

Note: The preference is to use the data-property for updating this value with JS as pseudo-elements cannot be selected with JS.

htmlcssbackgroundgradientcustom-data-attribute

Answer №1

An alternative technique involves utilizing CSS variables that can be easily modified with JS:

.customRange {
  -webkit-appereance: none;
}

.customRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green var(--p, 50%), #fff 0%);
}
<input class="customRange" type="range" name="capability" style="--p:80%">
<br>
<input class="customRange" type="range" name="capability" style="--p:100%">
<br>
<input class="customRange" type="range" name="capability" >

By using JavaScript to adjust the value dynamically:

document.querySelector('.customRange').addEventListener('input',function(e) {
  e.target.style.setProperty('--p', e.target.value*10+'%');
})
.customRange {
  -webkit-appereance: none;
}

.customRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green var(--p, 50%), #fff 0%);
}
<input class="customRange" min='1' max='10' type="range" name="capability">

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

Exploring the asynchronous for loop functionality in the express.js framework

I'm attempting to use a for loop to display all images. I have stored the paths of the images in an array called Cubeimage. However, when trying to display them using <img>, I encountered an error. How can I write asynchronous code to make it wo ...

javascripthtmlexpressweb

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

javascripthtmlcssanimationscroll

Looking for a particular table element using Selenium Webdriver in Java: A Guide

After locating a table element using this: WebElement tableElement = selectorboxelement.findElement(By.xpath("//ancestor::table")); I identified the `selectorboxelement` as a web element with this line of code: WebElement selectorboxelement = driver.fin ...

javaselenium-webdrivercellhtmlancestor

Struggling to eliminate the unseen padding or white space preventing the text from wrapping under the button

Just starting out with html and css and could use some assistance with a small issue I've come across. While redesigning a website, I have a three-button form (Donate, Find, Subscribe). I'm trying to get the paragraph underneath the Donate and Fi ...

htmlcssformsbuttonwhitespace

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

Creating obstacles in a canvas can add an extra layer of challenges and

I am working on creating a basic platformer game using the code displayed below. window.onload = function(){ var canvas = document.getElementById('game'); var ctx = canvas.getContext("2d"); var rightKeyPress = false; var leftKeyPress = false; ...

javascripthtmlcanvas

Mozilla Firefox's webpage controls adapt according to the type of authentication being used

On my .NET MVC web page, I have 3 radio buttons for selecting a value on a form. However, in a specific test environment with two authentication methods (user/password or certificate), the radio buttons mysteriously change to checkboxes when the page loads ...

css.nethtmlfirefox

Creating if-else conditions in React can be achieved by utilizing the ternary

How can I make an if-else condition dynamic based on a button click? I have tried implementing it but it doesn't seem to work. I attempted to create conditions for different languages. For example, clicking the button labeled "Español" should print ...

htmlreactjs

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

jQuery Animation: Creative Menu Icon Display

Whenever the toggle menu's navigation icon is clicked, it triggers an animation that transforms the "hamburger" icon into an "X", causing the navigation menu to drop down. If a user clicks either the navigation icon or outside of the active toggle me ...

javascriptjqueryhtmlcss

Convert form data into JSON format while maintaining numerical values

One question that is frequently asked, but I have yet to find a solution for, is how to create a JSON body from a form in which the quotes are placed around the property names rather than the values. The desired JSON body should look like this: { "salary1 ...

htmljqueryjsonforms

Exploring Anchor Tags in Next.js

I'm having trouble using an anchor tag in Next.js Despite not receiving any console errors when setting it up and clicking the link, the page doesn't scroll to the specified id tag. A recent GitHub issue implies that a significant amount of cus ...

htmlnext.js

I'm looking for expert tips on creating a killer WordPress theme design. Any suggestions on the best

Currently in the process of creating a custom Wordpress theme and seeking guidance on implementation. You can view the design outline here. Planning to utilize 960.gs for the css layout. My main concern is how to approach the services section (1, 2, 3...) ...

phpcsswordpress

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

I am faced with a challenge involving two HTML elements: 1). a div element that functions as a multiple select, created automatically by a predefined widget, and 2). a button that triggers an onclick event. On the JavaScript side, I have a global variable ...

javascripthtmljqueryajax

Trouble displaying image due to issues with javascript, html, Angular, and the IMDb API integration

I have been working on displaying images from the IMDb API in my project. Everything works perfectly fine when I test it locally, but once I deploy the project to a server, the images do not load initially. Strangely, if I open the same image in a new tab ...

javascripthtmllinuxangularjsimdb

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

There is a full background HTML5 video set to autoplay on my website. However, there seems to be an issue with some iOS mobile devices using Safari as the video fails to load properly at times. The error message displayed is: https://i.stack.imgur.com/D4X ...

htmlreactjsvideobackgroundhtml5-video

Which tool is best for comparing and minimizing duplicated CSS style sheets?

In my current project, I am working with 2 CSS files. The first one serves as a "default" style sheet that is used in all websites created from the same templates. The second file contains the specific styles for our application. Both of these files are in ...

csscomparediff

Ways to conceal the contents of a page behind a transparent background div while scrolling

I created a Plunkr with the following markup: <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"& ...

htmlcsstwitter-bootstrap

Side-menu elevates slider

Struggling to keep my slider fixed when the side-menu slides in from the left? I've scoured for solutions without luck. Any expert out there willing to lend a hand? Code Snippet: https://jsfiddle.net/nekgunru/2/ ...

javascriptcsssliderposition

"Enhancing HTML table rows using jQuery for a dynamic user experience

I'm currently using a jQuery script to determine the number of rows in a table and then display that count within a <td> tag. <tr> <td id = "jquery"> </td> <td> <%= f.text_field :data1 %> </td> <td ...

jqueryhtmlruby-on-rails