Beginner with React, trying to learn by coding, here i have a slider which im trying to make thumb bigger but it does not get bigger than input where it is(as you can see if i make thumb bigger it wont show it fully). Any advice on how to make that look like the one i want?

English is not my mother language so could be mistakes.

so here is my slider:

i want it to look like this:

what i have done already:

https://codesandbox.io/s/tender-architecture-s4we0m?file=/src/styles.css

css:

.App {
  font-family: sans-serif;
  text-align: center;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="range"] {
    overflow: hidden;
    width: 80px;
    /* -webkit-appearance: none; */
    background-color: white;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    /* -webkit-appearance: none; */
    color: #13bba4;
    margin-top: -1px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    /* -webkit-appearance: none; */
    height: 20px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #ce7c00;
  }
}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

js:

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { useRef, useState } from "react";
import "./styles.css";
// Style
const MainWrapper = {
  background: "salmon",
  width: "100%",
  height: "100vh",
  position: "relative"
};

const InputWrapper = {
  position: "fixed",
  zIndex: 9999,
  width: "100%"
};

const ScaleIndicator = {
  textAlign: "right",
  position: "absolute",
  right: "40px",
  background: "blue",
  color: "white",
  zIndex: "1000",
  padding: "10px"
};

const Slider = {
  width: "200px",
  margin: "10px 30px"
};

export default function App() {
  const transformComponentRef = useRef(null);
  const [scale, setScale] = useState(0.7);

  const updateScale = (e) => {
    const targetScale = parseFloat(e.target.value);
    const factor = Math.log(targetScale / scale);
    const { zoomIn, zoomOut } = transformComponentRef.current;

    /*
      how react-zoom-pan-pinch calculate new scale :
      targetScale = scale * Math.exp(1 * factor);

      we need factor(step) for zoomIn and zoomOut, just reverse the previous equation to get factor
      factor = Math.log(targetScale / currentScale);
    */
    // console.log(scale * Math.exp(1 * factor), newScale);

    // const targetScale = scale * Math.exp(1 * factor);

    if (targetScale > scale) {
      zoomIn(factor, 0);
    } else {
      zoomOut(-factor, 0);
    }

    setScale(targetScale);
  };

  return (
    <div style={MainWrapper}>
      <h1 style={ScaleIndicator}>{(scale * 100).toFixed(0)}%</h1>
      <div style={InputWrapper}>
        <input
          type="range"
          min="0.1"
          max="1.5"
          step="0.01"
          value={scale}
          onChange={updateScale}
          style={Slider}
        />
      </div>
      <TransformWrapper
        ref={transformComponentRef}
        onZoomStop={(e) => {
          setScale(e.state.scale);
        }}
        initialScale={scale}
        minScale={0.1}
        maxScale={1.5}
        doubleClick={{
          disabled: true
        }}
        // wheel={{
        //   activationKeys: ["z"]
        // }}
        // panning={{
        //   activationKeys: ["x"],
        // }}
        limitToBounds={false}
        zoomAnimation={{ disabled: true }}
        centerOnInit
        onZoom={(e) => {
          setScale(e.state.scale);
        }}
      >
        {({ zoomIn, zoomOut, setTransform, ...rest }) => {
          return (
            <TransformComponent
              wrapperStyle={{
                width: "100%",
                height: "100%"
              }}
            >
              <img
                src="https://images.pexels.com/photos/2450218/pexels-photo-2450218.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                alt="Cool Astro"
              />
            </TransformComponent>
          );
        }}
      </TransformWrapper>
    </div>
  );
}

that link i provided looks totally different with firefox browser, idea on that also ?

CodePudding user response：

For general styling of range input look at this great article styling cross browser compatible range inputs css

This covers most of the things you can do with input ranges and also author created a site to create input ranges. range.css - generate styles for your HTML5 Inputs by Daniel Stern

To be able to change the color of lower and upper part of the slider in Chrome you have to write a little bit of js code, for that you can check this thread Style lower and upper fill in HTML5 range input

CodePudding user response：

Can you please try this CSS code in your slider thumb class? I think it will work :)

you can use this link as well

https://toughengineer.github.io/demo/slider-styler/slider-styler.html

 input[type=range]::-webkit-slider-thumb {
      cursor: ew-resize;
      background: #434343;
      box-shadow: -100px 0 0 100px #ce7c00;
      -webkit-appearance: none;  
      border: none;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: #434343;
      margin-top: -7px;
    }