ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

自定义修改 input 的range

2021-09-22 16:02:12  阅读:348  来源: 互联网

标签:none 自定义 appearance range webkit input 0px


最终效果

 遇到的问题:
        1、无法直接修改 input 进度条进度条颜色,解决办法使用css3背景渐变解决

css: 需要注意加上-webkit-appearance: none 否则无效
 /*滑动条背景*/
  input[type="range"] {
    -webkit-appearance: none;
    width: 522px;
    height: 24px;
    background: linear-gradient(90deg, #1C2D4B 0%, #292F3A 100%);
    border-radius: 12px;
    box-shadow: 0px 0px 8px 0px rgba(68,119,255,1);
  }
  input[type="range"]::-ms-fill-lower {
    -webkit-appearance: none;
    background: #f00;
  }
  /*滑动条操作按钮样式*/
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6px;
    height: 24px;
    background: #4477FF;
    box-shadow: 0px 0px 6px 0px rgba(68,119,255,1);
  }

完整案例:

<template>
  <div style="margin: 50px;">
    <input
      v-model="input"
      max="1000"
      :style="{'background': `linear-gradient(to right, rgba(68, 119, 255, 0.2) ${getPercent(input, 1000)}%, #252E3F ${ getPercent(input, 1000)}% `}"
      type="range">
    <span class="c_fff">{{input}}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: 0
    }
  },
  mounted () {
  },
  methods: {
    getPercent (num, total) {
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return 0
      }
      return total <= 0 ? 0 : (Math.round(num / total * 10000) / 100.00)
    },
  }
}

</script>

<style lang="less">
  /*滑动条背景*/
  input[type="range"] {
    -webkit-appearance: none;
    width: 522px;
    height: 24px;
    background: linear-gradient(90deg, #1C2D4B 0%, #292F3A 100%);
    border-radius: 12px;
    box-shadow: 0px 0px 8px 0px rgba(68,119,255,1);
  }
  input[type="range"]::-ms-fill-lower {
    -webkit-appearance: none;
    background: #f00;
  }
  /*滑动条操作按钮样式*/
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6px;
    height: 24px;
    background: #4477FF;
    box-shadow: 0px 0px 6px 0px rgba(68,119,255,1);
  }
</style>


        

标签:none,自定义,appearance,range,webkit,input,0px
来源: https://blog.csdn.net/weixin_41854372/article/details/120416565

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有