Layout appearance issue - a small line displayed in the path

[fermedina]

Hi. I'm developing an application with Ionic 3. When the value is less than half a small line appear after handler.

You can see a screenshot here. I don't know why that happens. Any idea?

I'm using version 1.3

My roundSlider configuration is:

$('#slider-2').roundSlider({
      radius: 150,
      width: 10,
      handleSize: 10,
      sliderType: 'min-range',
      startAngle: 90,
      readOnly: true,
      showTooltip: false,
      max: 100,
      value: 30
});

The css is:

.rs-bg-color {
      background-color: color($colors, 'bgPage');
}

.rs-range-color {
      background-color: color($colors, 'primary');
}

.rs-path-color {
      background: color($colors, 'bgPage');
}

.rs-handle {
      background-color: white;
      border: 2px solid color($colors, 'primary');
}

.rs-border {
      border: 0;
}

[soundar24]

@fermedina, In chrome while apply transform it will cause the jagged edges. To resolve this issue I made the below workaround:
http://jsfiddle.net/soundar24/LpuLe9tr/1227/

Otherwise, you can use the svg version of the slider (currently it was done in sample level only):
https://jsfiddle.net/soundar24/1usqdvc9/25/

[fermedina]

Hi @soundar24! The workaround solves my problem more or less. Thanks!

[soundar24]

@fermedina This might be after a very long back, but a new update for you.

roundSlider was release with SVG mode support, so your mentioned requirement can be achieved in a very simplified way.

Demo: https://jsfiddle.net/soundar24/r5jcb1q4/5/