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



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



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



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


Log in to reply