使用 styled-components 自定义输入滑块的样式 [英] Custom styling an input slider using styled-components

问题描述

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

我在下面的代码中实现的

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

---

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

解决方案

这可能对你有帮助

<块引用>

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

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

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

---

Update Here'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

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 自定义输入滑块的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！