Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS property active, I was able to hide the thumb initially and only show it while the user is actively using the slider by dragging it with their finger or mouse pointer. However, once the interaction stops, the thumb disappears even though the chosen value remains.

  1. The initial state can be seen here: https://i.sstatic.net/KlwYC.png

  2. When the slider is being interacted with (dragged), it looks like this: https://i.sstatic.net/NQzZT.png

  3. After the interaction has finished, the slider appears as shown in this image: https://i.sstatic.net/T87nq.png

I attempted to solve this issue by adding another duplicated slider with a visible thumb component at all times. Then, I tried conditionally rendering one of the sliders based on the value (

value ? <Slider1 /> : <Slider2 />
). However, this solution only partially worked as the thumb always defaulted to the beginning of the slider regardless of the selected value.

Do you have any suggestions or ideas on how I could achieve the desired behavior? Any help would be greatly appreciated. Thank you.

If you need code samples, please refer to the material UI slider API documentation.

cssreactjsmaterial-uislider

Answer №1

Consider using the withStyles() function and importing withStyles along with the Slider component:

import { withStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";

You can then customize your Slider like this:

export const CustomizedSlider = withStyles({
  thumb: {
    height: 28,
    width: 28,
    backgroundColor: "transparent",
    marginTop: -14,
    marginLeft: -14,
    "&:hover, &$active": {
      backgroundColor: "red",
    },
  },
})(Slider);

The default color of the Slider will be "transparent" and change to "red" on hover. For more information on withStyles(), visit here. Hope this solution suits your needs!

Code reference: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/slider/CustomizedSlider.js

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

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

htmlcssreactjs

Design a table without borders that is compatible for pasting into a Word document

I've been struggling to figure out the correct format for creating a border-less table that, when pasted in Word, will maintain its appearance as shown below: <strong>Foo</strong> <ol> <li value="0">This is zero.</li&g ...

htmlcssms-word

Updating paths dynamically with React Js

I currently have the following imports: import {Input, InputTxtCenter} from '../../../components/forms/input/input.js'; import {ButtonRed} from '../../../components/buttons/'; import {TxtCenter} from '../../../components/misc/text ...

node.jsreactjswebpack

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

jquerycss

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

htmlcssbackground-color

What is the best way to transfer properties to a different component using the onClick event triggered by an element generated within the map function?

I am currently working on an application using react to retrieve data from a mongodb database. Within one of the components, called Gallery, I have integrated a map function to display a list of items. My goal is to implement an onClick event for each elem ...

javascriptreactjsmongodbreact-hooks

Are there any class options that offer a wider width than modal-lg?

I am currently using vue.js along with Bootstrap. Within my modal dive, I am looking for a class that will help me increase the width of the modal div, As you can see from the image below, my modal div looks like this. I plan on adding 12 more tabs, whic ...

csshtmltwitter-bootstrapvue.js

The positioning of sub-menu items is incorrect

I would like the subitems in the menu to be positioned directly under the main menu items instead of being slightly offset to the right. CSS ul#menu { float:left; width:100%; margin:0; padding:0; list-style-type:none; background-c ...

css

How to align content within a FormControlLabel using Material UI

My goal is to line up the label and radio button inside a FormControlLabel component so that the label occupies the same width regardless of its content. The current appearance can be seen below: https://i.stack.imgur.com/GhXed.png Below is the code I am ...

cssreactjsmaterial-ui

Utilize React's Context Provider to centrally manage all state while incorporating async calls

I am currently exploring more refined methods to establish a provider/consumer setup in which an asynchronous call is initiated from the provider, but the consumer does not need to handle state management. Within my context provider, I am fetching data to ...

javascriptreactjs

The `Route` component is expecting a `function` for the `component` prop, but instead it received an `object`

For a while now, I've been grappling with an issue that seems to be unique to me. The problem lies within my component and container setup for the start screen rendering at the initial route. components/DifficultySelection.jsx import React from &apo ...

javascriptreactjsreact-routerreact-redux

Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation. My HTML & CSS structure is set up as follows: .parent{ background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1be ...

htmlcss

The table borders in IE 11 do not display properly when using Html5 and CSS

In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It l ...

htmlcss

Exploring the Power of Optional Chaining Operator in React and Babel

For my project, I have configured babel with the following settings: { "presets": ["react", "es2015","stage-1", "transform-optional-chaining"], "plugins": ["transform-runtime"] } Additionally, these are the devDependencies listed in my package.json: ...

reactjsbabeljs

Performing an axios request using form data in a React JS application

I am trying to figure out how to use axios in react js to make a cURL request that is currently working. Here is the cURL request: curl -k --request GET "BASE_URL_SERVER/sendText" --form "user_id='uidxxxx'" --form "sign_id=" Every time I try to ...

javascriptnode.jsreactjsaxios

How can I create a similar design using Material-UI in React?

How can I achieve this design using Material-UI in React? https://i.sstatic.net/bc27a.png The challenge I'm facing is figuring out how to incorporate the refresh icon on the right side. ...

material-ui

Error Message: Unable to retrieve property "country" as the variable this.props is not defined

Currently, I am developing a react application However, when running this function using infinite scroll, an error is encountered An Unhandled Rejection (TypeError) occurs: Unable to access the "country" property, since this.props is undefined async pa ...

javascriptreactjsreact-props

The background image stubbornly refuses to stretch to the full width of the section container

Looking at my code example and the screenshot provided, it's clear that the image is not fitting into the container even when set to 100% width or utilizing other properties. Below you will see the code snippet: .about-us{ background-image: url(i ...

htmlcss

The Autocomplete component from Material UI is not expanding properly within a Grid layout, despite setting fullWidth={true}

Check out my project Sandbox here: https://codesandbox.io/s/gridnotworkingchildnotstretching-vk6ld Within Home.jsx, I've set up a row using Grid with a height of 100vh to center content horizontally. Inside this row, there is another column Grid with ...

reactjsautocompletegridmaterial-ui

Adjusting image sizes in WordPress using CSS and HTML

I am currently working on a blog using the Marlene theme on Wordpress. For my posts, the default image resolution is 835x577, which suits my needs perfectly (see example post). However, I also have a "News" page where I want to display a list of all news ...

phphtmlcsswordpress