使用样式组件自定义样式输入滑块

问题描述

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

我在下面的代码中实施的

从'react'导入React；从样式组件"导入样式；从 'styles/json/colors.json' 导入颜色；const image = './myImage.png';常量拇指 = {宽度:54，身高:26}const StyledSlider = styled.input`高度:5px；背景色:${colors.colorScheme.secondary};大纲:无；过渡:不透明度 0.2s；&::-webkit-slider-thumb {-webkit 外观:无；外观:无；宽度:${thumb.width}px;高度:${thumb.height}px;边框:0；背景: url(${image});光标:指针；边界半径:2px；背景尺寸:100%；背景位置:居中；背景重复:不重复；大纲:无；}&::-moz-range-thumb {宽度:${thumb.width}px;高度:${thumb.height}px;边框:0；背景: url(${image});光标:指针；大纲:无；边界半径:2px；背景尺寸:100%；背景位置:居中；背景重复:不重复；}`导出默认值(道具)=>(<StyledSlider 类型=范围"{...道具}/>)

---

更新这是一个温度解决方案的代码沙箱.在我的实际代码中，如果我开始弄乱边距，阴影不会与线条完美对齐.我也不知道如何把这个四舍五入.

解决方案

这可能对你有帮助

代码由@rblakejohnson 编写，但我做了一些更改

从'react'导入React；从样式组件"导入样式；从 'styles/json/colors.json' 导入颜色；const image = './myImage.png';常量拇指 = {宽度:54，身高:26}常量高度 = "36px";常量拇指高度 = 36;const trackHeight = "16px";//颜色const upperColor = "红色";const lowerColor = "黄色";const thumbColor = "橙色";const thumbHoverColor = "#ccc";const upperBackground = `linear-gradient(to bottom, ${upperColor}, ${upperColor}) 100% 50%/100% ${trackHeight} 无重复透明`;const lowerBackground = `linear-gradient(to bottom, ${lowerColor}, ${lowerColor}) 100% 50%/100% ${trackHeight} 无重复透明`;//Webkit 无法设置进度的样式，因此我们在拇指元素上使用长阴影来伪造它const makeLongShadow =(颜色，大小)=>{让我 = 18;let shadow = `${i}px 0 0 ${size} ${color}`;for (; i (<StyledSlider type="range" {...props}/>)

I am trying to style a slider that I am creating using styled components. It should be a different color and should have an image for the thumb piece, but it is still the default blue, and the default thumb piece. I'm using bootstrap, so this slider styling must be the default for bootstrap.

Other solutions which I've implemented in the code below aren't working. All I'm trying to do is to change the colour to something like yellow, and place an image overtop of the thumb piece.

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

---

UpdateHere's a code sandbox of a tempermental solution. In my actual code the shadow doesn't line up perfectly with the line if I start messing with the margin. Also I can't figure out how to get this rounded.

解决方案

This might help you

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

这篇关于使用样式组件自定义样式输入滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！