Ad
Rc-slider Icon Or Html Label
I use re-slider in my react app, someone know if it's possible to set label with icon/html ?
I tried to define option as follow:
const sliderOptions = {
1: {
style: {
color: '#00365f',
},
label: '<i class="fas fa-check"></i>',
},1: {
style: {
color: '#00365f',
},
label: '<i class="fas fa-times"></i>',
}
};
but html tags has been transformed in entity
<i class="fas fa-check"></i>
Ad
Answer
From the example documentation:
const marks = {
'-10': '-10°C',
0: <strong>0°C</strong>,
26: '26°C',
37: '37°C',
50: '50°C',
100: {
style: {
color: 'red',
},
label: <strong>100°C</strong>,
},
};
Don't include it as a string, instead include it as a DOM/React Node:
const sliderOptions = {
1: {
style: {
color: '#00365f',
},
label: <i className="fas fa-check"></i>,
},1: {
style: {
color: '#00365f',
},
label: <i className="fas fa-times"></i>,
}
};
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad