{"mappings":"yXAAA,IAAAA,EAAAC,EAAA,S,0BAaO,MAAMC,EAAkC,EAACC,UAC9CA,EAASC,MACTA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,SACLA,MAEA,EAAAP,EAAAQ,KAAC,MAAG,CACFL,UAAWM,EAAAC,EAAA,CAAWC,EAAA,cAAsBR,GAC5CC,MAAO,IACFA,EACHQ,eAAgB,GAAGN,UACnBO,gBAAiB,6BACfR,EAAO,GAAKA,EAAO,GAAK,qBAClBA,EAAO,IAAMA,EAAO,MAAMC,O,UAGpC,EAAAN,EAAAQ,KAAC,QAAK,CACJM,KAAK,QACLR,MAAOA,EACPS,IAAK,EACLC,IAAK,IACLT,SAAU,EAACU,cAAEA,KAAoBV,GAAUU,EAAcX,c,kCCnC/D,IAAAY,E,2CAAAA,EAA+B","sources":["src/component/RangeInput/index.tsx","src/component/RangeInput/index.module.less"],"sourcesContent":["import classNames from 'classnames';\nimport { CSSProperties, FC } from 'react';\n\nimport * as styles from './index.module.less';\n\nexport interface RangeInputProps {\n  className?: string;\n  style?: CSSProperties;\n  colors?: [string, string?];\n  value: number;\n  onChange: (value: number) => any;\n}\n\nexport const RangeInput: FC<RangeInputProps> = ({\n  className,\n  style,\n  colors,\n  value,\n  onChange\n}) => (\n  <div\n    className={classNames(styles['range-wrap'], className)}\n    style={{\n      ...style,\n      backgroundSize: `${value}% 100%`,\n      backgroundImage: `linear-gradient(to right, ${\n        colors[1] ? colors[0] : 'transparent'\n      } 0%, ${colors[1] || colors[0]} ${value}%)`\n    }}\n  >\n    <input\n      type=\"range\"\n      value={value}\n      min={0}\n      max={100}\n      onChange={({ currentTarget }) => onChange(+currentTarget.value)}\n    />\n  </div>\n);\n",".range-wrap {\n  width: 100%;\n  height: 3px;\n  background-repeat: no-repeat;\n  background-position: 0%;\n  background-color: rgba(17, 23, 41, 1);\n}\ninput[type='range'] {\n  -webkit-appearance: none;\n  width: 100%;\n  transform: translateY(-1rem);\n  &::-webkit-slider-runnable-track {\n    height: 3px;\n    box-shadow: none;\n    background: rgb(var(--bs-info-rgb));\n  }\n  &:focus {\n    outline: none;\n  }\n  &::-webkit-slider-thumb{\n    -webkit-appearance: none;\n    height: 1rem;\n    width: 1rem;\n    margin-top: -2px;\n    background: #d8d8d8;\n    border-radius: 50%;\n  }\n}\n\n@-moz-document url-prefix() { \n  input[type='range']  {\n    height: 3px;\n    &::-moz-range-track{\n      height: 3px;\n      box-shadow: none;\n      background: rgb(var(--bs-info-rgb));\n    }\n    &::-moz-range-thumb{\n      height: 1rem;\n      width: 1rem;\n      margin-top: -2px;\n      background: #d8d8d8;\n      border-radius: 50%;\n    }\n  }\n}"],"names":["$ayMG0","parcelRequire","$6b722d1cccf80968$export$f5603a09670563b9","className","style","colors","value","onChange","jsx","$parcel$interopDefault","$8g1PZ","$33UA8","backgroundSize","backgroundImage","type","min","max","currentTarget","$23ad8adba752fa1f$export$47e7451b42cf011a"],"version":3,"file":"Trading.0788ecda.js.map"}