how do i pass mulltiple props to set a background for styled range input-CodePudding

import React, { useState } from "react";
import styled from "styled-components";

const SliderInput = styled.input.attrs({ type: "range" })`
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-top: 3%;
    outline: 0;
    height: 80px;
    border-radius: 15px;
    background: ${({theme},{props}) =>
      `linear-gradient(to right, ${theme.colors.primary} 0%, ${theme.colors.highlight} ${props.value/255*100}%, #fff ${props.value/255*100}%, #fff 100%);`};
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);

    ::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px;
      height: 24px;
      background-image: radial-gradient(
        circle,
        ${({ theme }) => theme.colors.primary} 40%,
        ${({ theme }) => theme.colors.secondary} 45%
      );
      border-radius: 50%;
      box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
    }

    ::-moz-range-thumb {
      width: 24px;
      height: 24px;
      -moz-appearance: none;
      border-radius: 50%;
      box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
    }
  `;
const Slider = (props) => {
  const [value, setValue] = useState(255);
  
  function handleChange(e) {
    setValue(e.target.value);
    SetBrightness(e.target.value);
  }
  return (
    <SliderInput
      className={props.name}
      min={0}
      max={255}
      value={value}
      onChange={handleChange}
      step={63.75}
    />
  );
};

export default Slider;

function SetBrightness(value) {
  if (window.fully !== undefined) {
    window.fully.setScreenBrightness(parseFloat(value));
  }
}

Im getting a bunch of errors trying to pass more than one prop to styled component. If i just pass props.value it works and if i just pass theme that works but not both.

trying to make the slider fill with a gradient and it works if i declare the slider input in the same scope as the component and just use the value from state but that gives me an error in the console

"checkDynamicCreation.js:32 The component styled.input with the id of "sc-jrcTuL" has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component."

CodePudding user response：

There might be other issues, but it seems that the background line in SliderInput is trying to define two arguments while the props is one object.

Perhaps it could be changed to the following example to properly read the props.

Simplified live demo: stackblitz (omitted the SetBrightness function)

background: ${({ theme, value }) =>
  `linear-gradient(to right, ${theme.colors.primary} 0%, ${
    theme.colors.highlight
  } ${(value / 255) * 100}%, #fff ${(value / 255) * 100}%, #fff 100%);`}