Is it possible to increase the font size of the text on my MUI Slider's thumb for customization

Currently, I am utilizing the MUI-Slider component within React to showcase a value. My objective is to personalize the 'thumb' and valueLabel to boast a larger font size and thumb appearance. Despite referencing MUI's documentation on CSS customization for the thumb, my attempts have been somewhat limited in success. You can view how my slider currently appears here. While the thumb and dot appear blue, everything else is grey with very small font sizing.

Here's a snippet of my React component code: Note: the sx usage has been directly borrowed from the MUI documentation, as demonstrated here.

import { Slider } from '@material-ui/core';

<Slider
      disabled
      min={0}
      max={100}
      value={50}
      marks={[
        { value: 0, label: '0' },
        { value: 100, label: '100' },
      ]}
      aria-label="Conviction Score"
      color="primary"
      sx={{
        '& .MuiSlider-thumb': {
          borderRadius: '1px',
        },
      }}
      valueLabelDisplay="on"
      orientation="vertical"
      valueLabelFormat={value => `${value.toFixed(1)}`}
    ></Slider>

In an attempt to adjust the styling, I inserted the following SCSS code. While I was able to modify the thumb color, altering any font attributes seems to be elusive.

  color:#0d47a1;
  font-size: 20px !important;
  font-weight: bold !important;
} 

I am puzzled by what mistake I might be making. Could this customization be achieved solely through CSS?

Answer №1

To enhance the appearance of your sx within the Slider component, simply use this code snippet to update your current one.

sx={{
    "& .MuiSlider-thumb": {
      borderRadius: "1px"
    },
    "& .MuiSlider-valueLabelLabel": {
      fontSize: "20px",
      fontWeight: "bold",
      color: "#0d47a1"
    }
  }}

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

Neighbor wrapping causing Flex to shrink

Is there a way to make the element shrink when the flex container below grows due to flex-wrapping? Currently, the new space is created below the container instead of shrinking the one above. The flex-grow and flex-shrink properties do not seem to work as ...

Error caught: The `onClick` listener was anticipated to be a function, but instead, it was found to be of type `object` in

While attempting to delete a customer entry with a specific id, I encountered an issue in my customers.js file. Despite adding a delete function, the entry was not being removed successfully. The console displayed the following error: caught Error: Expec ...

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

"Can you guide me on how to display a React component in a

I have a function that loops through some promises and updates the state like this: }).then((future_data) => { this.setState({future_data: future_data}); console.log(this.state.future_data, 'tsf'); }); This outputs an array o ...

What methods can be used to decrease the width of a space?

I currently have this on my website: https://i.sstatic.net/lfBum.png But I want to organize the 3 elements to look like this: https://i.sstatic.net/SwyMs.png <th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">DAY 1<br> ...

Caution: The server is expected to have a matching navigation within the div tag

I am currently working with next.js framework and encountering the following error message: "Warning: Expected server HTML to contain a matching nav in div". Below is a snippet of my code: export default function Member() { const router = useRouter(); ...

Should you choose a pre-built CSS framework or create your own from scratch?

Have you come across a framework that meets your project needs with just a few tweaks, or have you forged your own path along the way? What advice do you have for someone facing this decision and focusing on priorities like: Implementing a CSS reset Refi ...

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

Change the background color of a MUI ToggleButton based on a dynamic selection

const StyledToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({ "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: selectedColor, } })); const FilterTeam = (props) => { const [view, setView] = ...

Scroll to the end of the main div's horizontal position instead of using offset().left

I'm struggling with an issue in my code. <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* ...

CSS: Display the index of each ordered list item within a child element

I'm working on creating a unique accordion-style widget similar to the design shown in this image: https://i.sstatic.net/EBymf.png My plan is to utilize an ordered list where each <li> element will include a question, answer, and an expand/col ...

Is the getInitialProps function in document.js executed on the server side or client side?

Does the getInitialProps function run only on the server, or client, or both? class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const initialProps = await Document.getInitialProps(ctx); console.log("docu ...

Using react-day-picker to set the selected date in a different component with DayPickerInput

Utilizing the DayPicker component in one section, I am aiming to import the chosen day into the TodoForm section. This imported value will then be used to establish the state, ensuring that the chosen day is saved and displayed in each todo item. class Da ...

The top-center alignment in Toaster (ngx-toastr) is missing a top margin

I recently started using the ngx-toastr library in my project. I have a message service that displays error messages at the top-center of the screen with the following code: @Injectable() export class MessageService { constructor(private toastrServic ...

Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

After creating a WebGL 3D Panorama application using a SphereGeometry, PerspectiveCamera, and CanvasTexture, I am now trying to enhance the scene by adding "HotSpots" over specific areas of the SphereGeometry. However, I am facing difficulty in updating th ...

I require the flexbox children to be arranged in a regular manner

How can we set flexbox children to default layout behaviors? Let's make them behave like the disobedient kids they are. .wrapper { This should be a row } .column { Make all heights equal display: flex; } .child { Back to regular display...wit ...

What is the best way to design an element that exceeds the size of my physical body

I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...

Adding babel-plugin-styled-components to a create-react-app project

I have been attempting to implement the styled-components-babel-plugin in a create-react-app project in order to have the components' names show up as classnames in my Chrome developer tools. Despite following the installation instructions and creatin ...

Utilize Pseudo Elements for Designing a Unique Background Overlay

I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the conte ...

Stepping inside the realm of object-oriented programming, one might wonder how to initialize an object

I wrote this user.js function but I am having trouble creating an instance of it in another file. It seems like the structure is a function that contains a class which has functions within it. user.js 'use strict'; const {Sequelize} = require(&a ...