Hey there, currently working on creating a range slider with 2 values using the material UI slider component. My goal is to customize the two thumbs with different colors.
https://i.sstatic.net/BUq12.png
Any ideas on how I can achieve this?
Hey there, currently working on creating a range slider with 2 values using the material UI slider component. My goal is to customize the two thumbs with different colors.
https://i.sstatic.net/BUq12.png
Any ideas on how I can achieve this?
This solution may seem a bit unconventional, but it achieves the desired outcome.
Essentially, you utilize MaterialUI's useStyle to create a custom style and then target the thumb elements by referencing their child index.
Since the thumbs are consistently the 4th and 5th elements in a ranged slider, you can use CSS to select them and apply the desired styling:
https://example.com/myimage.png
import React from "react";
import { Slider, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
export default function CustomSlider() {
const [value, setValue] = React.useState([20, 37]);
const handleChange = (event, newValue) => {
setValue(newValue);
};
const useStyles = makeStyles({
root: {
"&>.MuiSlider-thumb": {
"&:nth-child(4)": {
color: "green !important"
},
"&:nth-child(5)": {
color: "red !important"
}
}
}
});
const classes = useStyles();
return (
<div>
<Typography id="range-slider" gutterBottom>
Example Slider
</Typography>
<Slider
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
className={classes.root}
/>
</div>
);
}
CodeSandbox Demo: https://codesandbox.io/s/stack-12345678-muithumbs-demo?file=/src/CustomSlider.jsx:0-900
Additional Resources:
Utilizing the latest version of MUI (v5.10), I was able to accomplish this using a styled component:
import { Slider as MuiSlider, styled } from '@mui/material';
const StyledSlider = styled(MuiSlider)({
'& .MuiSlider-thumb[data-index="0"]': {
color: 'blue',
},
'& .MuiSlider-thumb[data-index="1"]': {
color: 'orange',
},
});
This code snippet produces the desired result.
Looking for a way to implement a confirmation dialog in my react-admin project, similar to JavaScript's alert function but more visually appealing. I want the user to only proceed with certain database operations if they click OK on the dialog. I cou ...
I encountered an issue with my custom hook where I am fetching images from a Firestore collection. Everything was working smoothly until I attempted to retrieve the metadata of the images as well. The problem arose when I included the getMetaData function, ...
I'm currently tackling a frontend mentor project, and I've hit a roadblock trying to get my image overlay to position itself over the image rather than below it. I've set the parent position to relative and the overlay to absolute, but so fa ...
Is it possible to create a dynamic scrollbar with primefaces p:panel? Whenever I add the div, the scrollbar appears fixed on the page. How can I make this div position itself according to the user's browser, specifically within a p:panel? ...
Upon executing web3.eth.getAccounts().then(console.log);, I encountered an empty array and also received a warning stating ./node_modules/web3-eth-accounts/src/scrypt.js Critical dependency: the request of a dependency is an expression. The project began w ...
I have utilized Tinymce text editor/textarea in my webpage. How can I incorporate an additional button onto the toolbar? For instance, upon clicking the added button, it should prompt a dialog with three textfields: title, age, and gender. Upon filling ou ...
In my code, I have defined an interface called ColumnDef which consists of two methods: getValue that returns type C and getComponent which takes an input argument of type C. Everything is functioning properly as intended. interface ColumnDef<R, C> { ...
I am looking to change the ordering of Bootstrap 4 Navbar. Currently, the logo is on the left side, but I want it in the center with menus on both sides. Can someone help me with changing this order? Check out the current Navbar layout below: <nav c ...
I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...
As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...
Hello there, I am new to React and currently facing a challenge that I need help with. I want to display and hide React components before and after making a REST API call. Here is the component I have: class Loading { render(){ return ( < ...
I am currently utilizing ajax to display information from a database. The application I am working on is a chat app, where clicking on a specific conversation will append the data to a view. The structure of my conversation div is as follows: <div clas ...
I'm currently working on the development of a website that includes a feature where a static navbar transforms into a fixed navbar after scrolling down 500px. The transition from "navbar-static-top" to "navbar-fixed-top" is functioning properly. Howev ...
I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for. Intended Goal : HTML Markup : <body> <div class="header"> THIS IS A HEADER W ...
https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...
After browsing multiple options online, I decided to turn to the expertise of the Stack Overflow community to ask for recommendations based on personal experience. I am specifically in search of a plugin that can substitute a select element with a custo ...
Here are three ways to retrieve color: const primary = red[500]; // #F44336 const accent = purple['A200']; // #E040FB const accent = purple.A200; // #E040FB (alternative approach) However, I am unsure of the distinctions between them and whic ...
I'm facing an issue with dynamically updating background colors of specific elements using ajax, JSP, and a servlet call. Even though all the lines of code seem to be executing, there is no visible change on the front end. I've attached my JS fun ...
When it comes to using Chakra in the components folder, there seems to be some issues encountered. I have successfully added ChakraProvider to recognize the properties, but the problem arises with the Accordion. Can someone guide me on how to get the accor ...
I have been working on a project where I need to create a sitemap, and I am currently using next-sitemap for generation. However, I've encountered an issue with this method, as well as other solutions I've come across, because the sitemap is only ...