squircle

Make all the squircles you need, in the browser. https://github.com/georgedoescode/squircle https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

BaseRangeInput.vue (2572B)

      1 <script>
      2 export default {
      3     name: 'BaseRangeInput',
      4     props: {
      5         name: {
      6             type: String,
      7             required: true,
      8         },
      9         min: {
     10             type: Number,
     11             required: true,
     12         },
     13         max: {
     14             type: Number,
     15             required: true,
     16         },
     17         value: {
     18             type: Number,
     19             required: true,
     20         },
     21         step: {
     22             type: Number,
     23             required: true,
     24         },
     25     },
     26     methods: {
     27         handleInput(e) {
     28             this.$emit('change', e);
     29         },
     30     },
     31 };
     32 </script>
     33 
     34 <template>
     35     <input
     36         :id="name"
     37         :value="value"
     38         type="range"
     39         :name="name"
     40         :min="min"
     41         :max="max"
     42         :step="step"
     43         @input="handleInput"
     44     />
     45 </template>
     46 
     47 <style scoped>
     48 input {
     49     position: relative;
     50     min-width: 0;
     51     max-width: 100%;
     52     cursor: pointer;
     53     border: 0;
     54 }
     55 
     56 input[type='range'] {
     57     -webkit-appearance: none;
     58     width: 100%;
     59     background: transparent;
     60 
     61     --thumb-width: 16px;
     62     --thumb-height: 32px;
     63     --thumb-radius: 16px;
     64     --thumb-bg: #4d3df7;
     65     --thumb-scale: 1;
     66     --track-height: 4px;
     67     --track-radius: 2px;
     68     --track-bg: var(--grey-000);
     69 }
     70 
     71 input[type='range']:hover {
     72     --thumb-scale: 1.125;
     73 }
     74 
     75 input[type='range']:active {
     76     --thumb-scale: 0.875;
     77 }
     78 
     79 input[type='range']::-webkit-slider-thumb {
     80     -webkit-appearance: none;
     81     height: var(--thumb-height);
     82     width: var(--thumb-width);
     83     margin-top: -14px;
     84     border: 0;
     85     border-radius: var(--thumb-radius);
     86     background: var(--thumb-bg);
     87     cursor: pointer;
     88     transition: transform 125ms ease-in-out;
     89     transform: scale(var(--thumb-scale));
     90 }
     91 
     92 input[type='range']::-moz-range-thumb {
     93     -webkit-appearance: none;
     94     border: 0;
     95     width: var(--thumb-width);
     96     height: var(--thumb-height);
     97     border-radius: var(--thumb-radius);
     98     background: var(--thumb-bg);
     99     cursor: pointer;
    100     transition: transform 125ms ease-in-out;
    101     transform: scale(var(--thumb-scale));
    102 }
    103 
    104 input[type='range']::-webkit-slider-runnable-track {
    105     border: 0;
    106     width: 100%;
    107     height: var(--track-height);
    108     cursor: pointer;
    109     background: var(--track-bg);
    110     border-radius: var(--track-radius);
    111     transition: background-color 125ms ease-in-out;
    112 }
    113 
    114 input[type='range']::-moz-range-track {
    115     border: 0;
    116     width: 100%;
    117     height: var(--track-height);
    118     cursor: pointer;
    119     background: var(--track-bg);
    120     border-radius: var(--track-radius);
    121     transition: background-color 125ms ease-in-out;
    122 }
    123 </style>