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

Question

我正在尝试为使用样式化组件创建的滑块设置样式。它应该是不同的颜色，并且应该有拇指片的图像，但它仍然是默认的蓝色和默认的拇指片。我正在使用 bootstrap，因此此滑块样式必须是 bootstrap 的默认样式。

我在下面的代码中实现的

不起作用。我想要做的就是将颜色更改为黄色之类的颜色，并将图像放在拇指片的上方。

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 StyledSlider = styled.input`

    height: 5px;
    background-color: ${colors.colorScheme.secondary};
    outline: none;
    transition: opacity .2s;

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: ${thumb.width}px;
        height: ${thumb.height}px;
        border: 0;
        background: url(${image});
        cursor: pointer;
        border-radius: 2px;
        background-size: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        outline: none;
    }

    &::-moz-range-thumb {
        width: ${thumb.width}px;
        height: ${thumb.height}px;
        border: 0;
        background: url(${image});
        cursor: pointer;
        outline: none;
        border-radius: 2px;
        background-size: 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }

`

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

更新 Here's a code sandbox 的脾气解决方案。在我的实际代码中，如果我开始弄乱边距，阴影就不会与线条完美对齐。我也不知道如何四舍五入。

Answer 1

这可能对您有所帮助

the code was written by @rblakejohnson but I did some changes

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} />
)

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

Custom styling an input slider using styled-components

javascript

slider

twitter-bootstrap

reactjs

styled-components