How to remove box around slider handle

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


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

  • 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

  • @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.

  • 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>

  • 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>

  • 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>

  • @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>

    alt text

  • 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”/>

  • @Sacrekin Please make a reproduction codepen showing the behavior.

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

  • Removing the label does not solve the issue

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

      <div class="q-pa-md">
        <q-badge color="secondary">
          Model: {{ value }} (-20 to 20, step 4)
          :label-value="'Orb:' + value"
    export default {
      data () {
        return {
          value: 0

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

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

Log in to reply