How to remove box around slider handle

[Sacrekin]

Using the slider example from the docs and I get this hugly box around the handle. Any idea how to remove it?

[metalsadman]

@Sacrekin which example, and what browser? Cause im not seeing the “ugly” box.

[Sacrekin]

Firefox, Chrome, Safari IOS, all alike. And I do get it on around QRadio as well since I upgraded to 1.8.

body class=“mobile touch platform-ios body–light”
Dev mode… spa
Pkg quasar… v1.8.2
Pkg @quasar/app… v1.5.2
Debugging… enabled

[metalsadman]

@Sacrekin nope, can’t reproduce, tried chrome and firefox on windows/linux/android. all looks fine to me. maybe only happening on IOS? don’t have ios/apple device so can’t test on that, though we have many ios/apple users, no complain from them about this other than you. so i’m not sure, what’s going on here.

[Sacrekin]

The DOM generate for QRadio is this:

<div data-v-6fe9c4e2="" tabindex=“0” class=“q-radio cursor-pointer no-outline row inline no-wrap items-center reverse”><div class=“q-radio__inner relative-position no-pointer-events q-radio__inner–falsy”><input type=“radio” class=“q-radio__native q-ma-none q-pa-none invisible”><svg focusable=“false” viewBox=“0 0 24 24” class=“q-radio__bg absolute”><path d=“M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12”></path><path d=“M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6” class=“q-radio__check”></path></svg></div><div class=“q-radio__label q-anchor–skip”>7am</div></div>

[Sacrekin]

The DOM around the slider is this:

<div role=“slider” aria-valuemin=“0” aria-valuemax=“16” aria-valuenow=“11” data-step=“1” tabindex=“0” class=“col-5 q-slider q-slider–inactive text-light-green q-slider–editable q-slider–label q-slider–label-always”><div class=“q-slider__track-container absolute overflow-hidden”><div class=“q-slider__track absolute” style=“left: 0px; width: 68.75%;”></div></div><div class=“q-slider__thumb-container absolute non-selectable” style=“left: 68.75%;”><svg focusable=“false” viewBox=“0 0 20 20” width=“20” height=“20” class=“q-slider__thumb absolute”><path d=“M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0”></path></svg><div class=“q-slider__focus-ring”></div><div class=“q-slider__pin absolute” style=“transform-origin: calc(100% - 4px) 50%;”><div class=“q-slider__pin-text-container” style=“right: -31.25%; transform: translateX(-6px);”><span class=“q-slider__pin-text q-slider__pin-value-marker-text”>Orb:11</span></div></div><div class=“q-slider__arrow”></div></div></div>

[Sacrekin]

Both include an SVG focusable element that could be the issue:

<svg focusable=“false” viewBox=“0 0 20 20” width=“20” height=“20” class=“q-slider__thumb absolute”><path d=“M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0”></path></svg>

[metalsadman]

@Sacrekin no it’s not got this and it’s showing fine for me

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" data-step="50" tabindex="0" class="q-slider q-slider--active q-slider--editable"><div class="q-slider__track-container absolute overflow-hidden"><div class="q-slider__track absolute" style="left: 0px; width: 50.4522%;"></div></div><div class="q-slider__thumb-container absolute non-selectable" style="left: 50.4522%;"><svg focusable="false" viewBox="0 0 20 20" width="20" height="20" class="q-slider__thumb absolute"><path d="M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0"></path></svg><div class="q-slider__focus-ring"></div></div></div>

[Sacrekin]

In your test, are you using the label, as I do?

<q-slider class=“col-5” v-model=“aspOrb” :min=“0” :max=“16” :step=“1” :label-value="‘Orb:’+aspOrb" label-always color=“light-green” @input=“filterChanged”/>

[metalsadman]

@Sacrekin Please make a reproduction codepen showing the behavior.

[Sacrekin]

I tried & I cannot reproduce it in codepen. It only happens within the context of the full app.

[Sacrekin]

Removing the label does not solve the issue

[metalsadman]

@Sacrekin nope, still can’t reproduce, tested it on actual project using your code above. same result, working fine.

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ value }} (-20 to 20, step 4)
    </q-badge>

    <q-slider
      label
      class="col-5"
      v-model="value"
      :min="0"
      :max="16"
      :step="1"
      :label-value="'Orb:' + value"
      label-always
      color="light-green"
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: 0
    }
  }
}
</script>

[Sacrekin]

SOLVED: Scoped an SVG style modifier I had in my code.

[metalsadman]

@Sacrekin next time post a detailed report, so we don’t have to go running in circles lol.