No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to remove box around slider handle

    Help
    2
    15
    256
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Sacrekin last edited by

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

      3780e599-4d2a-4950-8218-3cd3f10cbe69-image.png

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

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

        1 Reply Last reply Reply Quote 0
        • S
          Sacrekin last edited by

          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

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by 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.

            1 Reply Last reply Reply Quote 0
            • S
              Sacrekin last edited by

              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>

              1 Reply Last reply Reply Quote 0
              • S
                Sacrekin last edited by

                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>

                1 Reply Last reply Reply Quote 0
                • S
                  Sacrekin last edited by

                  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>

                  1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman last edited by 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>
                    

                    alt text

                    1 Reply Last reply Reply Quote 0
                    • S
                      Sacrekin last edited by

                      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 1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman @Sacrekin last edited by

                        @Sacrekin Please make a reproduction codepen showing the behavior.

                        1 Reply Last reply Reply Quote 0
                        • S
                          Sacrekin last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • S
                            Sacrekin last edited by

                            Removing the label does not solve the issue

                            1 Reply Last reply Reply Quote 0
                            • metalsadman
                              metalsadman last edited by metalsadman

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

                              <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>
                              
                              1 Reply Last reply Reply Quote 0
                              • S
                                Sacrekin last edited by

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

                                metalsadman 1 Reply Last reply Reply Quote 0
                                • metalsadman
                                  metalsadman @Sacrekin last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post