I'm trying to make a simple slider that change the font size using React and Material UI.
The slider is called PrettoSlider and it a part of Material UI.
What im trying to acheive is to use the slider an then change the font size depending on the slider.
This is what i have so far
export default function ChangeFontSlider() {
const [ItemValue, setItemValue] = React.useState(20);
const handlingChange = (event) => {
setItemValue(event.target.value);
event.preventDefault();
}
return (
<>
<p style={{fontSize: {ItemValue}}}>Drag me to change the font</p>
<PrettoSlider
onChange={handlingChange}
value={ItemValue}
/>
</>
);
}
When trying to slide the slider, I ether get an error or the font remain the same.
Any idea? Thanks!
The slider is called PrettoSlider and it a part of Material UI.
PrettoSlider is an example. Underline component is Slider which is documented here https://material-ui.com/api/slider/.
Accroding to the document, onChange function has 2 parameters, event is the event source while second parameter value is new value when you move slider, is what you need to get data from.
I know this is 8 months old, But you could also just do this in your style tag
<p style={{fontSize: `${ItemValue}px` }}>Drag me to change the font</p>
then instead of just updating a number every time you slide, it will actually increment in pixels
in mui for change the font of slider label you can use global class in slider api.
import { makeStyles } from "#mui/styles";
const sliderStyles= makeStyles({
slider: {
'& .MuiSlider-markLabel' : {fontFamily: 'Vazir' , fontSize: "12px"}
}
})
and set this class to className prop in slider.
import { sliderStyles} from "YOUR/STYLES/PATH";
<Slider
valueLabelFormat={valueLabelFormat}
getAriaValueText={valuetext}
step={null}
valueLabelDisplay="on"
marks={sliderMarks}
className={classes.slider} //this line important
/>
Related
I am a newbie and I have an issue that I need to connect two components(slider and radio buttons) from Ant design in React and make them collaborate together. So if I choose one of the options of the radio button, I want the slider to adjust the choice and conversely. For example, if I choose on the radio button year 2022 I want the to slider move to the right, and for example, if I choose 2022 on the slider I want to have checked radio button value 2022, and so on... I tried to put them into some conditions, but really don't know what to do with them. And also to have radio buttons in same width as slider.
import React from "react";
import { Radio, Slider } from "antd";
const App = () => {
const [currentValueRadio, setcurrentValueRadio] = React.useState(1);
const [currentValue, setCurrentValue] = React.useState();
return (
<>
<Radio.Group
onChange={(e) => {
console.log("radio checked", e.target.value);
setcurrentValueRadio(e.target.value);
}}
value={currentValueRadio}
>
<Radio value={1}>2021</Radio>
<Radio value={2}>2022</Radio>
</Radio.Group>
<Slider
defaultValue={2021}
min={2021}
max={2022}
style={{ width: 240 }}
onChange={(value) => {
console.log(currentValue);
setCurrentValue(value);
}}
/>
</>
);
};
https://codesandbox.io/embed/radio-group-antd-4-19-4-forked-134cps?fontsize=14&hidenavigation=1&theme=dark
You need to add the state being controlled as a 'value' prop to both components, to have them syncronised.
<Slider
value={currentValueRadio} // <- add a value prop
defaultValue={2021}
...
Adding the value prop in your example will have both components react to the same state value.
However, since the Radio components set the value to 1 or 2, and the range on the Slider is from 2021 to 2022, you may not see the result you're looking for. Perhaps change the Radio values to 2021 and 2022 respectively.
I'm trying to implement a carousel with React using the react-material-ui-carousel library. I want the next and previous navigation buttons to appear outside the images something like this. The docs for that library suggest customization is possible by overriding the navButtonsWrapperProps attribute of the Carousel component. But I still cannot get the nav buttons out of the image. Any help is appreciated. Thanks!
I stumbled upon the same problem not too long ago. I solved the problem by making the Carousel component's width larger than the carousel item itself. That way the navigation button will come outside of the item as it's item will have less width thatn its parent. Just make sure to align the Carousel and its item to center.
<Carousel className={styles.carousel}>
<Item className={styles.item} />
</Carousel>
// Inside your css
.carousel{
width: 1200px;
margin: 0 auto;
}
.item{
width: 1000px;
margin: 0 auto;
}
I don't think my solution is optimal but it's a quick fix for the given issue.
I know its to late but I have faced same problem. This answer can help someone.
import React, { useRef } from 'react';
import Carousel from 'react-material-ui-carousel'; // Carousel library
You can control carousel next/previous from outside button click using useRef
const sliderRef = useRef(null);
<Carousel
ref={ sliderRef }
>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>
Then you can use onClick event on any Button
const handlePrevSlide = (e) => {
e.preventDefault();
if(sliderRef?.current){
sliderRef.current.prev();
}
}
const handleNextSlide = (e) => {
e.preventDefault();
if(sliderRef?.current){
sliderRef.current.next();
}
}
It Works great for me
I have read different answers of similar questions, but they are all old and don't seem to work in the latest version of MUI.
I need to apply the touch ripple effect on a div, but I can't use a button or a ButtonBase element because there is another button inside it.
Thanks in advance for the reply.
Yes, you can use TouchRipple to emulate the ripple effect. This component is undocumented, but you can see how it's used in the ButtonBase and learn to use it yourself.
First, you need to pass a ref to TouchRipple and call ref.current.start(e) or ref.current.stop(e) when you want to start or stop the effect respectively.
e is the event object. When you call start(e), it needs the mouse or touch position (from mousedown or touchstart event) to know where to start the ripple effect (Source). You can override this behavior by setting center props to true, which makes the ripple effect always start at the middle.
Below is the minimum working example to get you started:
function App() {
const rippleRef = React.useRef(null);
const onRippleStart = (e) => {
rippleRef.current.start(e);
};
const onRippleStop = (e) => {
rippleRef.current.stop(e);
};
return (
<div
onMouseDown={onRippleStart}
onMouseUp={onRippleStop}
style={{
display: "inline-block",
padding: 8,
position: "relative",
border: "black solid 1px"
}}
>
Button
<TouchRipple ref={rippleRef} center={false} />
</div>
);
}
Live Demo
You Can Use ButtonBase API
With ButtonBase API you can pass component prop as div or any component you want
For Eg.
import { ButtonBase, Typography } from "#mui/material";
const App = () => {
return (
<ButtonBase component="div">
<Typography fontSize="1.2rem">Hello, I'm a div with MUI Ripple Effect!</Typography>
</ButtonBase>
)
}
export default App;
I recently added to this project, in this project they use material ui for some elements and some HTML elements for the rest of the elements. they write the style for both of them
Now they ask me to change the minimum code for changing the theme, this is the style for material ui part
// this is UserOptions.js
const chooseTheme = [theme]
const themeStyle =
localStorage.getItem('theme') === null ?
chooseTheme[0]['IGS'] : chooseTheme[0][localStorage.getItem('theme')];
const styles = theme => ({
button: {
backgroundColor: themeStyle.bkgTextColor,
color: themeStyle.dialogContentColor,
},
})
this is the textfield I used for changing the theme
<TextField
select
style ={{direction: 'center', width: '100px'}}
type= 'select'
>
<option value={'Light'}>Light</option>
<option value={'Dark'}>Dark</option>
</TextField>
and I used this code for exporting part
export default withStyles(styles)(UserOptions);
this is the Theme.js file
export const Light = {
bkgTextColor: '#19417C';
dialogContentColor: '#E7EFFA';
}
when user change the otion of the textfield, the html element color changes but i should refresh the page to see the material ui elements color changed, what should I do to make the material ui color change without using MuiThemeProvider (maybe i should redirect to this page after re-render the page and i don't know how)
I have ToggleRefinement checkboxes in my project and was trying to style it using ".ais-ToggleRefinement-checkbox {}" but the only thing that seems to be able to change is the font-size to make the checkbox bigger. Color and background-color doesn't do anything. I'd like to change the colors (especially the color when the checkbox is checked) and possibly other styling of the checkbox since I'm using BlueprintJS custom checkboxes in other parts of my website and I'd like the styling to be consistent between them.
Is there any way to achieve this?
To use the BlueprintJS components, you can use a connector. The docs for that are here and a guide for connectors in general here. This would look slightly like this:
import React from "react";
import { Checkbox } from "#blueprintjs/core";
import { connectToggleRefinement } from "react-instantsearch/connectors";
const Toggle = ({ refine, currentRefinement, label }) => (
<Checkbox
checked={currentRefinement}
label={label}
onChange={() => refine(!currentRefinement)}
/>
);
const ToggleRefinement = connectToggleRefinement(Toggle);
const App = () => (
<InstantSearch>
{/* add the rest of the app */}
<ToggleRefinement
attribute="materials"
value="Made with solid pine"
label="Solid Pine"
/>
</InstantSearch>
);