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

Dynamically switch between doubling Ajax calls in JavaScript

Encountering an issue with a jQuery click function. Triggering the click event on an HTML button dynamically loads styled checkbox and toggle switches based on their stored on/off state in a database. An additional click function is added to each loaded t ...

javascriptjqueryhtmlajax

Can you explain the purpose of the text-align property set to justify-all?

Can you explain what the CSS property text-align: justify-all does? According to MDN, it should justify even the content of the last line. However, I am not seeing any changes in my Chrome browser: <p style="text-align: justify-all"> one two thre ...

htmlcssw3c

Updating image on click in CSS and HTML

How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click After Click This is my code: <ActiveLink activeClassName=" ...

htmlcssnext.js

Searching for the clicked tr element within a tbody using jQuery

Here is my customized HTML table layout <table> <thead> <tr> <td class="td20"><h3>Client Name</h3></td> <td class="td20"><h3>Details</h3></td> ...

javascriptjqueryhtml

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

htmlcssangularangular-materialmat-form-field

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar Here is my current navbar for reference: My current navbar <header> <n ...

htmlcssnavbarbootstrap-5

Creating a Product Box design with CSS and incorporating visual elements

I have created a simple box design in Photoshop that I want to use to display product information. The box consists of a Header, Body, and Button, each as separate images. How can I assemble these elements using CSS/HTML? I only need the header text at th ...

htmlcss

The CSS linear gradients rainbow wheel is missing a few sections, only displaying part of its 12

I've almost got everything working, but I'm facing a challenge in displaying all 12 sections of the rainbow wheel. I know it's probably something very simple (Occam's razor). I've been following this amazing tutorial on CSS linear ...

htmlcss

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

a tag's functionality remains unchanged by its class association

In my Laravel project, I am attempting to create an active class for a link tag, but the class is not affecting the link. Below is the code snippet from my blade file: <li class="{{ (request()->is('categories*')) ? 'side-active&ap ...

cssbootstrap-4laravel-blade

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Here is the structure of my Vue component: Vue.component('list-category', { template: "#lc", props: ['data', 'category', 'search'], data() { return { open: false, categoryId: this.category ...

javascriptcssvue.jsvuejs2vue-component

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

javascripthtmlcss

Transferring data from PHP to an HTML function

I have attempted to retrieve the coordinates generated by the geocode and passed them to the function initialize in order to display a map with the location. Despite transferring the variables from PHP to the function initialize(), it seems that the lati ...

phphtmlfunction

Scroll the table automatically when the currently selected row is the second-to-last row

Having trouble with a scrolling table issue. https://i.sstatic.net/PFyN3.png Upon page load, the first row (ROW 1) is automatically selected and highlighted. Clicking the next button selects and highlights the subsequent rows. However, once ROW >= 8 (e ...

javascriptjqueryhtmlcssangularjs

Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Currently, I am developing an application that involves dragging an image using Jquery's draggable utility. The image is accompanied by several overlay divs containing various components positioned based on pixel locations, sometimes reaching into the ...

javascriptjqueryhtmlcssjquery-ui

Displaying an email exist error message is important when updating an email address, and it is necessary to validate both the

      My code is triggering an email exists error when I remove NOT EXISTS from the SELECT query. However, it also incorrectly claims that my current email already exists when I try to update it. How can I modify the select query to handle the email e ...

phpjqueryhtmlajax

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...

javascriptcsslaravelpopper.jsbootstrap-5

Unused DIV elements in jQueryUI are identified using XSLT

Just a heads-up, I'm new to xslt so please bear with me if this seems like a silly question. In my xsl:template I have created a div element like this: <div id="objectLocked"> This object is locked by another user. Do you want to remove the lo ...

htmlcssjquery-uixslt

What is the best way to create a container filled with numerical figures?

If I have the number 445758, and I want each of these numbers to be displayed in their own box like this: https://i.sstatic.net/hBiA4.jpg Can you explain how to achieve this? ...

htmlcss

Having trouble aligning image and expanding video to fit the screen in a NextJS application

I need help with: centering the image above the waitlist sign up scaling the background video in a relative way to fill the screen regardless of browser size This is the relevant part of index.js: import Head from 'next/head' import Image from ...

cssreactjsnext.js