3. ons-range with character ('A', 'B', 'C' etc.) inside

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-range with character ('A', 'B', 'C' etc.) inside

  • P

    This is a naive implementation of ons-range / v-ons-range improvement, character inside circle slider thumb.

    CSS rule:

    .thumb-a .range__input::-webkit-slider-thumb:before {
  content: "A";
  position: relative;
  left: 9px;
  top: 6px;
}

.thumb-b .range__input::-webkit-slider-thumb:before {
  content: "B";
  position: relative;
  left: 9px;
  top: 6px;
}

.thumb-c .range__input::-webkit-slider-thumb:before {
  content: "C";
  position: relative;
  left: 9px;
  top: 6px;
}

    HTML usage (ons-range / v-ons-range):

    <ons-range style="width: 100%;" class="thumb-a"></ons-range>
<br /><br />
<v-ons-range v-model="valueB" style="width: 100%;" class="thumb-b"></v-ons-range>

    It works inside monaca debugger but doesn’t work in monaca ide preview in Chrome.

    Hope this help :-)

    1
    P
     1 Reply
  • P

    Me again, It works on one phone but doesn’t work on other. This behavior I have seen many times in past using Ionic and Framework7.

    Is this because vendor’s implementation of Android webview are so different?

    0

  • @Pablo said:

    -webkit-slider-thumb

    According to this link:

    https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb

    Non-standard
    This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

    0