Ad

Rc-slider Icon Or Html Label

- 1 answer

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

&lt;i class="fas fa-check"&gt;&lt;/i&gt;
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
Ad