Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled.

I attempted adding a class to the thumb like this:

input[type=range]::-webkit-slider-thumb.disabled

and also tried adding the disabled directive:

input[type=range]::-webkit-slider-thumb:disabled

but neither of these solutions are working.

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #ffffff;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: linear-gradient(#FF6C2C,#FF2626);
  margin-top: -9px;
  z-index: 4;
}

I want it to look something like this:

input[type=range]::-webkit-slider-thumb:disabled {
  background: #CCCCCC;
}

Is there another way to achieve this? I'm unable to use jQuery for this task.

cssangulartypescript

Answer №1

Forget about it, I have discovered the solution! It should be written as follows:

input[type=range].disabled::-webkit-slider-thumb{
  background: #CCCCCC;
}

The "disabled" class needs to come after input[type=range] for it to function correctly.

Answer №2

Once I started writing like this, magic began:

input[type="range"]:disabled::-webkit-slider-thumb {
  opacity: 0.6 !important;
  cursor: context-menu !important;
}

input[type="range"]:disabled::-moz-range-thumb {
  opacity: 0.6 !important;
  cursor: context-menu !important;
}

input[type="range"]:disabled::-ms-thumb {
  opacity: 0.6 !important;
  cursor: context-menu !important;
}
<input type="range" disabled />

Answer №3

#customslider{
  -webkit-appearance: none;
  outline:none;
  border: 2px solid #ffffff;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0,0,0,1);
 overflow:hidden;
}

#customslider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 15px;
      width: 15px;
      border-radius:50%; 
      background:#000000;
      box-shadow: -410px 0 0 400px #007bff;
      cursor:pointer;
}
 <input style="" type= "range" id="customslider" name="point_count" min= "0"   max = "100" value= "10" disabled >

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

Modifying a chosen row within a table using Angular

Currently, I am working on developing a To-Do list application using Angular 11. The application includes a Bootstrap table where data is displayed upon clicking the add button. Each row in the table contains icons for delete, edit, save after editing, and ...

angularbootstrap-4

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

javascriptreactjstypescriptfile-upload

What is the best way to switch between components when clicking on them? (The component displayed should update to the most recently clicked one

I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to re ...

javascriptjquerycssreactjs

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

javascriptjquerycssresponsive-designgeometry

Experiencing difficulty when trying to link control with form in Angular Reactive forms

I am currently working on Angular Reactive forms and facing an issue with binding form controls dynamically. Initially, I have a form array in form group, and then I push form groups into the form array to add form controls dynamically. However, I encounte ...

angularangular2-formsangular-reactive-formsform-controlformarray

I am encountering an issue where my TSX import is being declared but not read when I attempt to pass it to the Jest render method. Can anyone explain

My Jest test file includes a simple import of a TSX component in my nextjs 13 project. However, when I try to use the component as a TSX tag, an error occurs: "'Properties' refers to a value, but is being used as a type here. Did you mean ...

typescriptjestjsnext.js13

subscriptions to behavior subjects may not function properly across all components

When setting up my global service, I instantiate a BehaviorSubject variable dataWorkflowService: export class CallWorkflowService { url = 'http://localhost:3000/'; selectedNode : BehaviorSubject<Node> = new BehaviorSubject(new Node(&a ...

javascriptangularrxjssubscriptionbehaviorsubject

What is the best way to compile TypeScript files without them being dependent on each other?

I have created a TypeScript class file with the following code: class SampleClass { public load(): void { console.log('loaded'); } } Now, I also have another TypeScript file which contains functions that need to utilize this class: // ...

javascripttypescriptvisual-studio

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a differ ...

javascriptjqueryhtmlcss

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

cssmysqli

Date input using manual typing format

I've implemented the ng-pick-datetime package for handling date selection and display. By using dateTimeAdapter.setLocale('en-IN') in the constructor, I have successfully changed the date format to DD/MM/YYYY. However, I'm facing an iss ...

javascriptangulartypescriptdate

The argument provided is of type 'string | null' which cannot be assigned to a parameter expecting only 'string' type. The value of 'null' is not compatible with the type 'string' in Angular 12

When trying to parse the stored session data using JSON.parse(sessionStorage.getItem('owner')), we may encounter an error stating: Argument of type 'string | null' is not assignable to parameter of type 'string'. This is becau ...

angulartypescriptangular12typescript4.0

Customizing the color of pagination in Bootstrap

Here is the pagination control I am working on: I have been trying to change the color of the pagination labels to purple, but my CSS overrides are not working. Here is what I currently have in my stylesheet: /* Pagination Styling */ .pagination { h ...

csstwitter-bootstrappagination

Arranging two divs side by side while considering a responsive theme

My struggle with aligning divs side by side continues. After searching through online forums for hours, I have yet to find a solution. The goal is to create a collage using six images. However, currently all the images stack vertically on the left side on ...

htmlcsslayoutalignment

Formatting the numbers for an unordered list located outside of the content

Can the numbers of an ordered list be formatted using the list-position-style set to outside? I am looking for a solution using only CSS since I cannot edit the HTML. Essentially, I want styled numbers with round background to replace the outside numbers. ...

htmlcsshtml-lists

Is Angular Signals on track to potentially supplant NgRx in some aspects?

After diving into Signals that are set to be introduced in Angular 16, I have already started coding with it and find it pretty amazing! I've heard rumors (and believe them) that Signals will likely replace most of the RxJS code, except for asynchron ...

angularngrxstate-managementangular-signals

The parameter in Angular cannot be assigned a type of 'null'

@Injectable({ providedIn: 'root' }) export class AuthenticationService { private currentUserSubject: BehaviorSubject<User>; public currentUser: Observable<User>; constructor(private http: HttpClient) { this.curren ...

angulartypescript

Sample test scenario for a service function that includes an HTTP subscription using Angular's HTTP RxJS

I have a service method that includes an HTTP call and subscribes immediately to the response code in order to execute the rest of the action command based on it. Here is an example of the service method: processData(id): void { const url = `http://l ...

angularunit-testingkarma-jasmineangular-testhttptestingcontroller

Creating sparse fieldset URL query parameters using JavaScript

Is there a way to send type-related parameters in a sparse fieldset format? I need help constructing the URL below: const page = { limit: 0, offset:10, type: { name: 's', age:'n' } } I attempted to convert the above ...

javascriptreactjstypescript