react实现多种可拖动滑块图表效果代码
代码语言：html
所属分类：图表
代码描述：react实现多种可拖动滑块图表效果代码，包括柱状图声音、范围面积图、价格区间、体积调节、扇形百分比进度调节、仪表盘指针调节等。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body{
color: #424E82;
background: #e5e7eb;
padding: 24px 0px;
}
:root {
--thumb-size: 24px;
--thumb-color:transparent;
}
input[type="range"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
outline: none;
position: absolute;
margin: auto;
top: 0;
height: var(--thumb-size);
background-color: transparent;
pointer-events: none;
}
input[type="range"]::-webkit-slider-runnable-track{
-webkit-appearance: none;
height: var(--thumb-size);
}
input[type="range"]::-moz-range-track{
-moz-appearance: none;
height: var(--thumb-size);
}
input[type="range"]::-ms-track{
appearance: none;
height: var(--thumb-size);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height:100px;
width: var(--thumb-size);
background-color: var(--thumb-color);
cursor: pointer;
pointer-events: auto;
}
input[type="range"]::-moz-range-thumb{
border: none;
outline: none;
-webkit-appearance: none;
height:100px;
width: var(--thumb-size);
cursor: pointer;
background-color: var(--thumb-color);
pointer-events: auto;
}
input[type="range"]::-ms-thumb{
border: none;
outline: none;
appearance: none;
height:100px;
width: var(--thumb-size);
cursor: pointer;
background-color: var(--thumb-color);
pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
background-color: none;
}
input[type="range"]:focus::-moz-range-thumb {
border: none;
outline: none;
}
input[type="range"]:active::-moz-range-thumb {
border: none;
outline: none;
}
.rt90{
transform: rotate(90deg);
}
</style>
</head>
<body >
<div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.0.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
<script type="text/babel">
const { useEffect, useRef, useState} = window.React;
const { render } = window.ReactDOM;
function App() {
return (
<>
<div className="max-w-7xl mx-auto flex flex-wrap items-center justify-center">
<DemoA />
<DemoB />
<DemoC />
</div>
<div className="max-w-7xl mx-auto flex flex-wrap items-center justify-center">
<DemoD />
<DemoE />
<DemoF />
</div>
</>
);
}
function Card({ title, children }) {
return (
<div className="p-2">
<div className="p-4 bg-white shadow-md rounded-md inline-block">
<div className="px-3 font-bold text-xl pb-4">{title}</div>
{children}
</div>
</div>
);
}
const demoAGraphData = [
{
key: 0,
path: "M7 95H5C2.23858 95 0 97.2386 0 100H12C12 97.2386 9.76142 95 7 95Z",
},
{
key: 1,
path: "M27 100V97C27 93.6863 24.3137 91 21 91C17.6863 91 15 93.6863 15 97V100H27Z",
},
{
key: 2,
path: "M42 100V92C42 88.6863 39.3137 86 36 86C32.6863 86 30 88.6863 30 92V100H42Z",
},
{
key: 3,
path: "M57 100V87C57 83.6863 54.3137 81 51 81C47.6863 81 45 83.6863 45 87V100H57Z",
},
{
key: 4,
path: "M72 100V82C72 78.6863 69.3137 76 66 76C62.6863 76 60 78.6863 60 82V100H72Z",
},
{
key: 5,
path: "M87 100V78C87 74.6863 84.3137 72 81 72C77.6863 72 75 74.6863 75 78V100H87Z",
},
{
key: 6,
path: "M102 100V73C102 69.6863 99.3137 67 96 67C92.6863 67 90 69.6863 90 73V100H102Z",
},
{
key: 7,
path: "M117 100V68C117 64.6863 114.314 62 111 62C107.686 62 105 64.6863 105 68V100H117Z",
},
{
key: 8,
path: "M132 100V63C132 59.6863 129.314 57 126 57C122.686 57 120 59.6863 120 63V100H132Z",
},
{
key: 9,
path: "M147 100V59C147 55.6863 144.314 53 141 53C137.686 53 135 55.6863 135 59V100H147Z",
},
{
key: 10,
path: "M162 100V54C162 50.6863 159.314 48 156 48C152.686 48 150 50.6863 150 54V100H162Z",
},
{
key: 11,
path: "M177 100V49C177 45.6863 174.314 43 171 43C167.686 43 165 45.6863 165 49V100H177Z",
},
{
key: 12,
path: "M192 100V44C192 40.6863 189.314 38 186 38C182.686 38 180 40.6863 180 44V100H192Z",
},
{
key: 13,
path: "M207 100V40C207 36.6863 204.314 34 201 34C197.686 34 195 36.6863 195 40V100H207Z",
},
{
key: 14,
path: "M222 100V35C222 31.6863 219.314 29 216 29C212.686 29 210 31.6863 210 35V100H222Z",
},
{
key: 15,
path: "M237 100V30C237 26.6863 234.314 24 231 24C227.686 24 225 26.6863 225 30V100H237Z",
},
{
key: 16,
path: "M252 100V25C252 21.6863 249.314 19 246 19C242.686 19 240 21.6863 240 25V100H252Z",
},
{
key: 17,
path: "M267 100V21C267 17.6863 264.314 15 261 15C257.686 15 255 17.6863 255 21V100H267Z",
},
{
key: 18,
path: "M282 100V16C282 12.6863 279.314 10 276 10C272.686 10 270 12.6863 270 16V100H282Z",
},
{
key: 19,
path: "M297 99V11C297 7.68629 294.314 5 291 5C287.686 5 285 7.68629 285 11V99C285 99.5523 285.448 100 286 100H296C296.552 100 297 99.5523 297 99Z",
},
];
function DemoAGraph({ value }) {
return (
<svg
width="300"
height="100"
viewBox="0 0 300 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="background">
{demoAGraphData.map(({ key, path }) => (
<path d={path} fill="#E8EBF9" key={key} />
))}
</g>
<g id="foreground" clipPath="url(#highlight)">
{demoAGraphData.map(({ key, path }) => (
<path d={path} fill="#424E82" key={key} />
))}
</g>
<defs>
<clipPath id="highlight">
<rect width={value * 3} height="100" fill="white" />
</clipPath>
</defs>
</svg>
);
}
function DemoA() {
const [value, setValue] = useState(37);
const handleChange = (event) => {
setValue(parseInt(event.target.value, 10));
};
return (
<Card title="Volume">
<div className="px-3">
<div style={{ width: "300px" }}>
<DemoAGraph value={value} />
</div>
</div>
<div className="relative " style={{ width: "324px", height: "24px" }}>
<div
className="absolute rounded-full bg-[#e8ebf9]"
style={{
left: "12px",
right: "12px",
height: "8px",
top: "50%",
transform: "translate(0, -50%)",
}}
></div>
<div
className="absolute rounded-full bg-[#424E82]"
style={{
left: "12px",
width: `${value * 3}px`,
height: "8px",
top: "50%",
transform: "translate(0, -50%)",
}}
></div>
<div
className="absolute grid place-items-center top-0"
style={{
width: "24px",
height: "24px",
left: `${value * 3}px`,
}}
>
<div className="bg-white shadow-md rounded-full grid place-items-center w-5 h-5">
<div
className="rounded-full bg-[#424e82]"
style={{
width: "14px",
height: "14px",
}}
/>
</div>
</div>
<input
type="range"
id="demoAInput"
name="demoAInput"
min={0}
max={100}
step={1}
value={value}
onChange={handleChange}
/>
</div>
<div className="flex items-center justify-between px-3 font-semibold h-8">
<div> 0 </div>
<div> {value} </div>
<div> 100 </div>
</div>
</Card>
);
}
function DemoBGraph({ start, diff }) {
return (
<svg
width="300"
height="100"
viewBox="0 0 300 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="background">
<path
d="M300 100H0C0 100 20.121 79.019 30 68C40.127 56.704 49.453 34.101 60 33C69.551 32.003 80 56 90 56C100 56 110.08 40.931 120 33C130.083 24.939 140.16 7.63699 150 7.99999C160.171 8.37499 169.563 28.791 180 37C189.628 44.573 199.889 55.623 210 56C219.894 56.369 230.323 39.006 240 40C250.371 41.066 260.381 55.514 270 65C280.45 75.306 300 100 300 100Z"
fill="#E8EBF9"
/>
</g>
<g id="foreground" clipPath="url(#highlight2)">
<path
d="M300 100H0C0 100 20.121 79.019 30 68C40.127 56.704 49.453 34.101 60 33C69.551 32.003 80 56 90 56C100 56 110.08 40.931 120 33C130.083 24.939 140.16 7.63699 150 7.99999C160.171 8.37499 169.563 28.791 180 37C189.628 44.573 199.889 55.623 210 56C219.894 56.369 230.323 39.006 240 40C250.371 41.066 260.381 55.514 270 65C280.45 75.306 300 100 300 100Z"
fill="#424E82"
/>
</g>
<defs>
<clipPath id="highlight2">
<rect x={start} width={diff} height="100" fill="white" />
</clipPath>
</defs>
</svg>
);
}
function DemoB() {
const [valueA, setValueA] = useState(25);
const [valueB, setValueB] = useState(75);
const handleChangeA = (event) => {
setValueA(parseInt(event.target.value, 10));
};
const handleChangeB = (event) => {
setValueB(parseInt(event.target.value, 10));
};
const start = Math.min(valueA, valueB) * 3;
const diff = Math.abs(valueA - valueB) * 3;
return (
<Card title="Range">
<div className="px-3">
<div style={{ width: "300px" }}>
<DemoBGraph start={start} diff={diff} />
</div>
</div>
<div className="relative " style={{ width: "324px", height: "24px" }}>
<div
className="absolute rounded-full bg-[#e8ebf9]"
style={{
left: "12px",
right: "12px",
height: "8px",
top: "50%",
transform: "translate(0, -50%)",
}}
></div>
<div
className="absolute rounded-full bg-[#424E82]"
style={{
left: `${12 + start}px`,
width: `${diff}px`,
height: "8px",
top: "50%",
transform: "translate(0, -50%)",
}}
></div>
<div
className="absolute grid place-items-center top-0"
style={{
width: "24px",
height: "24px",
left: `${valueA * 3}px`,
}}
>
<div
className="bg-white shadow-md rounded-full grid place-items-center"
style={{
width: "20px",
height: "20px",
}}
>
<div
className="rounded-full"
style={{
width: "14px",
height: "14px",
background: "#424e82",
}}
></div>
</div>
</div>
<div
className="absolute grid place-items-center"
style={{
width: "24px",
height: "24px",
top: 0,
left: `${valueB * 3}px`,
}}
>
<div
className="bg-white shadow-md rounded-full grid place-items-center"
style={{
width: "20px",
height: "20px",
}}
>
<div
className="rounded-full"
style={{
width: "14px",
height: "14px",
background: "#424e82",
}}
></div>
</div>
</div>
<input
type="range"
id="demoBInputA"
name="demoBInputA"
min={0}
max={100}
step={1}
value={valueA}
onChange={handleChangeA}
/>
<input
type="range"
id="demoBInputB"
name="demoBInputB"
min="0"
max="100"
step="1"
value={valueB}
onChange={handleChangeB}
/>
</div>
<div className="flex items-center justify-between px-3 font-semibold h-8">
<div> 0 </div>
<div>
{Math.min(valueA, valueB)} - {Math.max(valueA, valueB)}
</div>
<div> 100 </div>
</div>
</Card>
);
}
function Marker({ value }) {
return (
<div
className="absolute grid place-items-center"
style={{
width: "24px",
height: "24px",
top: "-40px",
left: `${value * 3}px`,
}}
>
<div className="relative w-full h-full text-sm">
<div
className="absolute grid place-items-center text-white font-semibold rounded-md"
style={{
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
background: "#424e82",
width: "50px",
height: "30px",
}}
>
${value * 10}
</div>
<div
className="absolute"
style={{
left: "50%",
top: "150%",
transform: "translate(-50%, -50%)",
width: "15px",
height: "30px",
}}
>
<svg
className="w-full"
viewBox="0 0 22 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.874 26.6557C12.3017 28.5519 9.61685 28.5519 9.04458 26.6557L0.999992 0H20.9186L12.874 26.6557Z"
fill="#424e82"
/>
</svg>
</div>
</div>
</div>
);
}
function DemoC() {
const [valueA, setValueA] = useState(25);
const [valueB, setValueB] = useState(75);
const handleChangeA = (event) => {
setValueA(parseInt(eve.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0