javascript - React 中的内联 -webkit-slider-thumb 样式
问题描述
我试图弄清楚如何应用内联样式来更改我的 input[range] 滑块的拇指。我无法弄清楚在外部 css 样式表中执行此操作,但如果有人知道如何使用以下代码执行此操作,那也很棒!我正在使用 React 和 Storybook。谢谢你的帮助!
滑块.js
interface ButtonProps { label?: string, background?: string, width?: string, boxshadow?: string }
const Slider = ({ label='', background='', width='', boxshadow='' }: ButtonProps) => {
const [value, setValue] = useState(120.5);
const onUpdate = (e) => {
setValue(e.target.value);
}
const sliderStyle = {
::-webkit-slider-thumb {
background: {background},
boxshadow: '-205px 0 0 200px {boxshadow}',
border: '3px solid {boxshadow}'
}
}
return (
<div className="slider-box">
<div>
<label className="slider-label">{value}c</label>
<p className="slider-title">{label}</p>
</div>
<StyledSlider
style={{background, width}}
list="tickmarks"
max={1200}
onChange={onUpdate}
step={0.01}
type="range"
value={value}
/>
<div>
<p className="slider-scale">1200 x 1200</p>
</div>
</div>
)
}
Slider.stories.js
export default {
title: "Slider",
component: Slider,
argTypes: {
background: { control: 'color' },
control: { type: 'range', min: 100, max: 1200, step: 50 },
boxshadow: { control: 'color' },
},
};
export const Primary = (args) => <Slider {...args} />;
Primary.args = {
label: 'Scale',
background: '#e3e3e3',
width: '300px',
boxshadow: 'red',
};
样式.js
export const StyledSlider = styled.input`
-webkit-appearance: none;
height: 10px;
overflow: hidden;
width: 300px;
border-radius: 5px;
outline: none;
margin: 0 0 0 0;
::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 10px;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
background: ${colors.black};
border-radius: 50%;
box-shadow: -205px 0 0 200px ${colors.primary500};
cursor: pointer;
height: 10px;
width: 10px;
border: 3px solid ${colors.primary500};
}
`;
解决方案
推荐阅读
- c++ - 无法为二维数组对象成员赋值
- node.js - 我可以获取要上传的文件输入的文件位置,还是有更好的方法?
- kotlin - java.lang.IllegalStateException:使用 GSON 解析 Json 时的 JSON OBJECT 和 JSON ARRAY
- .net - Rebus 未读取 MSMQ 队列中的消息
- node.js - 如何使用视图引擎快速路由?
- javascript - JQuery json.filter 两个条件
- python - 如何同时检查两列和两列?
- android - 反向stackFromEnd RecyclerView中的项目插入动画全部错误
- visual-studio-code - VS Code 快速修复总是给出“没有可用的代码操作”
- .net-core - 如何从 C# 客户端连接到 SignalR 集线器