使用 styled-components 自定义输入滑块的样式

import React from 'react';从样式组件"导入样式；从 'styles/json/colors.json' 导入颜色；常量图像 = './myImage.png';常量拇指 = {宽度:54，身高:26}常量高度 = "36px";常量拇指高度 = 36;常量 trackHeight = "16px";//颜色常量上色=红色"；const lowerColor = "黄色";常量 thumbColor = "橙色";常量 thumbHoverColor = "#ccc";const upperBackground = `linear-gradient(to bottom, ${upperColor}, ${upperColor}) 100% 50%/100% ${trackHeight} no-repeat transparent`;const lowerBackground = `linear-gradient(to bottom, ${lowerColor}, ${lowerColor}) 100% 50%/100% ${trackHeight} no-repeat transparent`;//Webkit 无法设置进度样式，所以我们在拇指元素上用长阴影来伪造它const makeLongShadow = (颜色，大小) =>{让我 = 18;让阴影 = `${i}px 0 0 ${size} ${color}`;对于 (; i <706; i++) {阴影 = `${shadow}, ${i}px 0 0 ${size} ${color}`;}返回阴影；};常量 StyledSlider = styled.input`溢出:隐藏；显示:块；外观:无；最大宽度:700px；宽度:100%；边距:0；高度:${高度}；光标:指针；&:焦点{大纲:无；}&::-webkit-slider-runnable-track {宽度:100%；高度:${高度}；背景:${lowerBackground}；}&::-webkit-slider-thumb {位置:相对；外观:无；高度:${thumbHeight}px；宽度:${thumbHeight}px；背景:网址(${图像})；背景尺寸:封面；边界半径:100%；边框:0；最高:50%；变换:translateY(-50%)；盒子阴影:${makeLongShadow(upperColor, "-10px")};过渡:背景色 150 毫秒；}&::-moz-范围轨道，&::-moz-range-progress {宽度:100%；高度:${高度}；背景:${upperBackground}；}&::-moz-range-progress {背景:${lowerBackground}；}&::-moz-range-thumb {外观:无；边距:0；高度:${thumbHeight}；宽度:${thumbHeight}；背景:${thumbColor}；边界半径:100%；边框:0；过渡:背景色 150 毫秒；}&::-ms-track {宽度:100%；高度:${高度}；边框:0；/* 隐藏曲目标记所需的颜色 */颜色:透明；背景:透明；}&::-ms-fill-lower {背景:${lowerBackground}；}&::-ms-fill-upper {背景:${upperBackground}；}&::-ms-thumb {外观:无；高度:${thumbHeight}；宽度:${thumbHeight}；背景:${thumbColor}；边界半径:100%；边框:0；过渡:背景色 150 毫秒；/* IE Edge 认为它可以支持 -webkit 前缀 */顶部:0；边距:0；盒子阴影:无；}&:悬停，&:焦点{&::-webkit-slider-thumb {背景颜色:${thumbHoverColor}；}&::-moz-range-thumb {背景颜色:${thumbHoverColor}；}&::-ms-thumb {背景颜色:${thumbHoverColor}；}}`;导出默认值(道具)=>(<StyledSlider type="range" {...props}/>)

import React from 'react';

import styled from 'styled-components';
import colors from 'styles/json/colors.json';

const image = './myImage.png';
const thumb = {
    width: 54,
    height: 26
}


const height = "36px";
const thumbHeight = 36;
const trackHeight = "16px";

// colours
const upperColor = "red";
const lowerColor = "yellow";
const thumbColor = "orange";
const thumbHoverColor = "#ccc";
const upperBackground = `linear-gradient(to bottom, ${upperColor}, ${upperColor}) 100% 50% / 100% ${trackHeight} no-repeat transparent`;
const lowerBackground = `linear-gradient(to bottom, ${lowerColor}, ${lowerColor}) 100% 50% / 100% ${trackHeight} no-repeat transparent`;

// Webkit cannot style progress so we fake it with a long shadow on the thumb element
const makeLongShadow = (color, size) => {
  let i = 18;
  let shadow = `${i}px 0 0 ${size} ${color}`;

  for (; i < 706; i++) {
    shadow = `${shadow}, ${i}px 0 0 ${size} ${color}`;
  }

  return shadow;
};

const StyledSlider = styled.input`
  overflow: hidden;
  display: block;
  appearance: none;
  max-width: 700px;
  width: 100%;
  margin: 0;
  height: ${height};
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: ${height};
    background: ${lowerBackground};
  }

  &::-webkit-slider-thumb {
    position: relative;
    appearance: none;
    height: ${thumbHeight}px;
    width: ${thumbHeight}px;
    background: url(${image});
    background-size: cover;
    border-radius: 100%;
    border: 0;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: ${makeLongShadow(upperColor, "-10px")};
    transition: background-color 150ms;
  }

  &::-moz-range-track,
  &::-moz-range-progress {
    width: 100%;
    height: ${height};
    background: ${upperBackground};
  }

  &::-moz-range-progress {
    background: ${lowerBackground};
  }

  &::-moz-range-thumb {
    appearance: none;
    margin: 0;
    height: ${thumbHeight};
    width: ${thumbHeight};
    background: ${thumbColor};
    border-radius: 100%;
    border: 0;
    transition: background-color 150ms;
  }

  &::-ms-track {
    width: 100%;
    height: ${height};
    border: 0;
    /* color needed to hide track marks */
    color: transparent;
    background: transparent;
  }

  &::-ms-fill-lower {
    background: ${lowerBackground};
  }

  &::-ms-fill-upper {
    background: ${upperBackground};
  }

  &::-ms-thumb {
    appearance: none;
    height: ${thumbHeight};
    width: ${thumbHeight};
    background: ${thumbColor};
    border-radius: 100%;
    border: 0;
    transition: background-color 150ms;
    /* IE Edge thinks it can support -webkit prefixes */
    top: 0;
    margin: 0;
    box-shadow: none;
  }

  &:hover,
  &:focus {
    &::-webkit-slider-thumb {
      background-color: ${thumbHoverColor};
    }
    &::-moz-range-thumb {
      background-color: ${thumbHoverColor};
    }
    &::-ms-thumb {
      background-color: ${thumbHoverColor};
    }
  }
`;

export default (props) => (
    <StyledSlider type="range" {...props} />
)