Slider in MaterialUI featuring a vibrant spectrum of colors

Currently, I am delving into MaterialUI and my focus is on creating a range slider. I came across this example that I found useful: https://material-ui.com/components/slider/#range-sliders

My goal is to assign different colors to the "high," "medium," and "low" ranges. I envision the final output to resemble something like this:

https://i.stack.imgur.com/c49Eb.png

The color of the thumbs is not a crucial factor, but it is essential for me to clearly differentiate between the various ranges on the rail.

Is there a method to accomplish this?

cssmaterial-ui

Answer №2

After some experimentation, I found a creative solution by utilizing the ThumbComponent component input on the slider. Interestingly, I discovered that when there are two thumbs, their data-index properties differ.

function MyThumbComponent(props) {
  if (props['data-index'] == 0) {
    props.style.backgroundColor = "green"
  } else if (props['data-index'] == 1) {
    props.style.backgroundColor = "red"
  }
  return (
    <span {...props}>
    </span>
  );
}

I have attached a screenshot of the output: https://i.stack.imgur.com/C1HUC.jpg (I apologize for not being able to embed it in the answer)

For those interested, here is the codepen link: https://codesandbox.io/s/dualrange-two-colors-fzifz

I hope this explanation proves helpful!

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

The content spills out of the container

I'm currently working with a div that displays scrolling text when it overflows. I am wondering if there is a way to hide the scroll bars until the text actually overflows? Additionally, is there a method to make the overflow occur only vertically and ...

jqueryhtmlcss

Customize the default styles for Angular 2/4 Material's "md-menu" component

Seeking to customize default styles of md-menu in Angular Material. The challenge lies in the dynamic generation of elements by Angular Material, preventing direct access from HTML. Visual representation of DOM: https://i.sstatic.net/v8GE0.png Component ...

javascriptcssangularangular-materialangular-material2

Displaying article title above container with backdrop picture

Currently, I am working on a specific layout design using Bootstrap 5 where I am trying to render a tag outside its original container so that it takes up the full width of the page. My attempts with absolute positioning on the img tag have proven to be ch ...

cssbootstrap-5

Count the start and end rows of a table within the <tfoot> using pdfHTML/iText 7

Currently, I am working on a project where I am developing a document generator that utilizes pdfHTML 3.0.3 and iText 7.1.14. The document includes a table displaying 'items'. It's worth noting that these item rows will likely span across mu ...

c#htmlcssitextpdfhtml

What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list: HTML code: <ul class="play_navigation"> <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> <li><a href="#" ...

jqueryhtmlcssxhtml

How to apply CSS classes to dynamically injected HTML in Angular 7

One of the challenges I'm currently facing is how to assign a CSS class based on a calculation in my component. Here's a snippet from my component class: @Component({ selector: 'app-render-json', template: `<div [innerHtml ...

cssangularangular7

Whenever I try to use Reactjs useState, an error always pops up

I am currently working with reactjs and utilizing the material-table to fetch data for an editable table. However, I have encountered an error similar to the image displayed. How can I resolve this issue? I have implemented useState for managing the edit ...

reactjsreact-nativematerial-ui

Experiencing problems with various React Carousel libraries when it comes to displaying

I have been attempting to integrate Carousel libraries into my react app, but I am encountering a common issue with all of them. The Carousels show the items on the first slide, but subsequent slides do not display any items, even though they exist within ...

javascriptcssreactjsslidercarousel

How can I make two flexbox items in a row stack on top of each other as a column?

I'm currently working on a layout that involves a parent flexbox containing multiple sections. My challenge lies in getting two specific sections to stack vertically while the rest of the layout remains horizontal. At the moment, I have two sections ...

csslayoutflexboxalignment

Changing from system mode to dark mode or light mode

Within my Next.js web application, I am implementing MUI to facilitate the transition between system, light, and dark modes. Persistence between sessions is achieved by storing the selected theme in local storage. The user has the option to change the them ...

javascriptreactjsmaterial-ui

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

Styling the footer to sit at the bottom of the page with a wider width, overlapping the content

I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website. Below ...

csslayoutfooter

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

I've been experimenting with controlling the refresh rate of drawn objects in a canvas using JavaScript. Even after going through the tutorials and examples on w3.school, I'm still unsure why the "setInterval" function is not executing the "gener ...

javascripthtmlcss

A guide to enhancing user experience: How to bring a MenuItem into focus using Material-

Is there a way to programmatically set focus on a specific MenuItem within the Menu component in material-ui? I know I can navigate to it manually by tabbing, but I need to trigger this action programmatically in response to a key down event. <Men ...

menufocusmenuitemmaterial-ui

Create a custom file uploading feature in React with Material-UI

I am currently working on developing a compact file upload component. Previously, I utilized the <input type="file"> tag but due to limited space constraints, I need to display both "Choose file" and the complete file path within a very sma ...

reactjsfilematerial-ui

Adjusting the line-height and baseline to accommodate various screen sizes on both mobile and desktop

This problem seems to keep coming back for me. I can't figure out what's causing it. Here are two images showing the issue: On desktops: On mobile devices: As you can see, the text is not vertically centered on mobile devices. Strangely, thi ...

htmlcssfontsbaseline

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

jquerycss

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

My goal is to update a state by submitting a value through a button click. Everything works perfectly when using the HTML input element. However, when I switch to the Material UI RaisedButton, the value isn't passed at all. Can someone help me identif ...

javascriptreactjsonclickmaterial-ui

Is there a way to customize Material UI's <Pagination> component to adhere to dark mode preferences?

I have implemented a Pagination component from Material-UI on my website. Although the control works perfectly fine, it does not adjust to dark mode, resulting in this visual: https://i.stack.imgur.com/hanyl.png The appearance of the Pagination tag is a ...

next.jsmaterial-uipaginationdarkmode

Creating a floating border effect.Would you like to know how

Currently working on a new component, I'm looking to create a unique border for certain cards. However, I'm struggling to find the perfect solution. Check out the specific border style needed in the image provided below. https://i.sstatic.net/4vA ...

csssassfrontend