Personalize Material design slider Label - final element

When using Material-ui, the default position of Slider's labels is centered:

However, I require the labels to have a space-between position. For example:

To achieve this, I tried using the '&:last-child' property for the markLabel class as suggested in the documentation here.

This code snippet is intended to style only the markLabel but it does not affect '&:last-child':

const theme = createMuiTheme({
  overrides: {
    MuiSlider: {
      markLabel: {
        color: "red",
        transform: "none",
        "&:last-child": {
          color: "green",
          transform: "translateX(-100%)"
        }
      },
    }
  }
});

You can view and test the code on this SandBox link:

https://codesandbox.io/s/material-ui-override-table-padding-on-last-child-forked-bt2lr?fontsize=14&hidenavigation=1&theme=dark

cssreactjsmaterial-ui

Answer №1

I encountered the same issue, but unfortunately I couldn't find a satisfactory solution. Therefore, I had to resort to using only two labels - start and end.

  markLabel:{
    color:'#b3b3b3',
    fontFamily: "'Montserrat', sans-serif",
    fontWeight:700,
    marginTop:6,
    transform:'translateX(-100%)',
    '&[data-index="0"]' : {
      transform:'none'
    },
  },

Answer №2

While I may be arriving late to the party, I managed to resolve this issue in a somewhat unconventional manner by utilizing styled components. This workaround could potentially benefit someone in the future. With my component having a varying number of marks, I utilized the "max" parameter passed to the slider to determine the last index.

const StyledSlider = styled(Slider)`
  *[class*='MuiSlider-markLabel-'][data-index='0'] {
    transform: none;
  }

  *[class*='MuiSlider-markLabel-'][data-index='${({ max }) => max}'] {
    transform: translateX(-100%);
  }
`;

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

I prefer the jumbotron to be uninterrupted by the navbar

I'm facing an issue where my jumbotron is ending up under the navbar, but I want to position it just below with some padding in between. Here's the code snippet: Take a look at the current appearance here: This is how it looks like ...

htmlcssnavbar

Managing CSRF tokens in React Relay: best practices

I have been diligently working on a React Native application that communicates with a GraphQL API from a Django server. Within React Native, I have decided to utilize React Relay for handling my GraphQL requests (following the instructions provided here). ...

reactjsreact-nativecsrfreact-relay

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

htmlcss

What is preventing me from translating an element using transform: translateY()?

I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello&ap ...

htmlcss

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

javascripthtmlcssfirefox-addonfirebug

The lightbox is triggered by clicking on a different div to display its content

Great news - my lightbox is up and running! Each image on my website corresponds to a different organization, and clicking on the image opens a specific lightbox. My question is: how can I have a lightbox configured so that only the trigger image is displ ...

javascripthtmlcsslightbox2

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js

Is there a way to access just the concealed text within an element?

Is there a way to create a JavaScript function that can specifically extract hidden text from an element? Are there any existing libraries with this capability, and if so, how efficient are they? In order for an element to be considered visible ac ...

javascriptcsshtmlseleniumwebdriver

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, inst ...

cssreactjs

Utilizing @Material-UI Tabs for a Stylish Navigation Bar

As a newcomer to the coding realm, I find myself on a quest for an answer that has proven elusive. Despite scouring various sources, none of the solutions I've stumbled upon seem to work in my case. The issue at hand revolves around my desire to util ...

javascriptreactjsnavigationnavbarmaterial-ui

Is it possible to prioritize CSS selectors in a specific sequence?

I possess a pair of div elements: div class="one two three" div class="three two one" Is it probable to formulate a CSS regulation that exclusively focuses on ".one.two.three" and does not encompass ".three.two.one" ? ...

csscss-selectors

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

javascriptphpjqueryhtmlcss

Verify if a certain value is present within a nested array

I need assistance with checking if a specific value is present within a nested array. Here is an example of the data I am dealing with: [ { name: 'alice', occupation: ['Artist', 'Musician'], }, { ...

javascriptarraysreactjsdata-structures

Is it possible to adjust the color of a pseudo class to align with the color of a different class?

Creating a unique 'block' element on a webpage named 'test-div' has been quite the challenge. Adding an additional class to test-div changes the background color, such as: test-div test-div-bg-bright-gold test-div test-div-bg-dark-blu ...

csspseudo-class

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

After compiling my vuejs app with npm run build, I noticed that the CSS does not display when viewing it in Firefox. Surprisingly, the styles do load in the network tab and appear under the style editor, but with "0 rules". However, everything displays fin ...

cssvue.js

Encounter issue when attempting to insert multiple items into MongoDB

// Import User and Item Models const User = require('../../models/User'); const Item = require('../../models/Item'); router .post('/login/:id', passport.authenticate('jwt', {session: false}), (req, res) => { ...

javascriptajaxreactjsmongodb

Struggling to get my React Typescript styled component slider to function within the component

Check out my demo here I created a simple react application using TypeScript and styled components. The main feature is a slider that adjusts the height of a red box. The red box is a styled component and I pass the height as a prop. Everything was fun ...

reactjstypescriptstyled-components

Learn how to utilize AngularJS Material to toggle the enable/disable functionality of a checkbox

Can someone assist me in enabling and disabling the checkbox as shown in the attachment image https://i.stack.imgur.com/l6g1C.jpg View the PLNKR angular.module('BlankApp', ['ngMaterial']) .config(['$mdThemingProvider', fun ...

cssangularjshtmlangularjs-material