parent
							
								
									fe9efa7128
								
							
						
					
					
						commit
						18214bcf10
					
				
				 6 changed files with 147 additions and 139 deletions
			
			
		@ -0,0 +1,30 @@ | 
				
			||||
import React from 'react'; | 
				
			||||
import { makeStyles } from '@material-ui/core/styles'; | 
				
			||||
import Slider from '@material-ui/core/Slider'; | 
				
			||||
 | 
				
			||||
const useStyles = makeStyles((theme) => ({ | 
				
			||||
  root: { | 
				
			||||
    width: 825, | 
				
			||||
  }, | 
				
			||||
  margin: { | 
				
			||||
    height: theme.spacing(1), | 
				
			||||
  }, | 
				
			||||
})); | 
				
			||||
 | 
				
			||||
export default function TrackInvertedSlider({CountPage}) { | 
				
			||||
  const classes = useStyles(); | 
				
			||||
 | 
				
			||||
  return ( | 
				
			||||
    <div className={classes.root}> | 
				
			||||
      <div className={classes.margin} /> | 
				
			||||
      <Slider | 
				
			||||
        // min={0}
 | 
				
			||||
        // value={CountPage}
 | 
				
			||||
        track="inverted" | 
				
			||||
        aria-labelledby="track-inverted-range-slider" | 
				
			||||
        value={1 - CountPage} | 
				
			||||
        max={100} | 
				
			||||
      /> | 
				
			||||
    </div> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
@ -1,57 +1,12 @@ | 
				
			||||
import React from "react"; | 
				
			||||
import { withStyles, makeStyles } from "@material-ui/core/styles"; | 
				
			||||
import Slider from "@material-ui/core/Slider"; | 
				
			||||
import "components/style/slider.scss"; | 
				
			||||
const useStyles = makeStyles((theme) => ({ | 
				
			||||
  margin: { | 
				
			||||
    height: theme.spacing(0), | 
				
			||||
  }, | 
				
			||||
})); | 
				
			||||
 | 
				
			||||
const PrettoSlider = withStyles({ | 
				
			||||
  root: { | 
				
			||||
    color: "#009AA8", | 
				
			||||
    height: "5px", | 
				
			||||
    padding: 0, | 
				
			||||
    direction: "rtl !important", | 
				
			||||
  }, | 
				
			||||
  thumb: { | 
				
			||||
    height: "15px", | 
				
			||||
    width: "15px", | 
				
			||||
    backgroundColor: "#fff", | 
				
			||||
    border: "1.5px solid currentColor", | 
				
			||||
    marginTop: "-6px", | 
				
			||||
    marginLeft: "-11px", | 
				
			||||
    direction: "rtl !important", | 
				
			||||
    "&:focus, &:hover, &$active": { | 
				
			||||
      boxShadow: "inherit", | 
				
			||||
      direction: "rtl !important", | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
  active: {}, | 
				
			||||
  track: { | 
				
			||||
    height: "5px", | 
				
			||||
    borderRadius: 4, | 
				
			||||
    direction: "rtl !important", | 
				
			||||
  }, | 
				
			||||
  rail: { | 
				
			||||
    height: "5px", | 
				
			||||
    borderRadius: 4, | 
				
			||||
  }, | 
				
			||||
})(Slider); | 
				
			||||
import Slider from "./Slider"; | 
				
			||||
 | 
				
			||||
export default function ProgressBar(props) { | 
				
			||||
  const classes = useStyles(); | 
				
			||||
  const { CountPage } = props; | 
				
			||||
  return ( | 
				
			||||
    <div className={(classes.root, "root")}> | 
				
			||||
      <PrettoSlider | 
				
			||||
        track="inverted" | 
				
			||||
        value={CountPage} | 
				
			||||
        max={100} | 
				
			||||
        min={1} | 
				
			||||
        // marks={true}
 | 
				
			||||
      /> | 
				
			||||
    </div> | 
				
			||||
    <> | 
				
			||||
      <Slider CountPage={CountPage} /> | 
				
			||||
    </> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
					Loading…
					
					
				
		Reference in new issue