Intégration du slider

package.json

@@ -49,6 +49,7 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@babel/plugin-proposal-private-property-in-object":"^7.21.11" ,
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",

src/AnnotationCreation.js

@@ -26,6 +26,7 @@ import { withStyles } from '@material-ui/core/styles';
 import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';
 import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
 import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
+import Slider from '@material-ui/core/Slider';
 import AnnotationDrawing from './AnnotationDrawing';
 import TextEditor from './TextEditor';
 import WebAnnotation from './WebAnnotation';
@@ -62,7 +63,6 @@ class AnnotationCreation extends Component {
     super(props);
 
     const annoState = {};
-
     if (props.annotation) {
       //
       // annotation body
@@ -137,7 +137,10 @@ class AnnotationCreation extends Component {
       textBody: '',
       textEditorStateBustingKey: 0,
       xywh: null,
+      // eslint-disable-next-line sort-keys
+      valueTime: [],
       ...annoState,
+      valuetextTime: '',
     };
 
     this.submitForm = this.submitForm.bind(this);
@@ -159,8 +162,16 @@ class AnnotationCreation extends Component {
     this.closeChooseColor = this.closeChooseColor.bind(this);
     this.updateStrokeColor = this.updateStrokeColor.bind(this);
     this.handleImgChange = this.handleImgChange.bind(this);
+    this.handleChangeTime = this.handleChangeTime.bind(this);
+    this.valuetextTime = this.valuetextTime.bind(this);
   }
 
+  handleChangeTime = (event, newValueTime) => {
+    this.setState({
+      valueTime: newValueTime,
+    });
+  };
+
   /** */
   handleImgChange(newUrl, imgRef) {
     const { image } = this.state;
@@ -196,6 +207,11 @@ class AnnotationCreation extends Component {
     this.setState({ tend: Math.floor(this.props.currentTime) });
   }
 
+  // eslint-disable-next-line require-jsdoc
+  valuetextTime() {
+    return `${this.valueTime}°C`;
+  }
+
   /** seekTo/goto annotation start time */
   seekToTstart() {
     const { paused, setCurrentTime, setSeekTo } = this.props;
@@ -484,7 +500,20 @@ class AnnotationCreation extends Component {
                 </Typography>
               </Grid>
 
+
+
+
               <Grid item xs={12} className={classes.paper}>
+                <Typography id="range-slider" gutterBottom>
+                  Time range
+                </Typography>
+                <Slider
+                  value={this.valueTime}
+                  onChange={this.handleChangeTime}
+                  valueLabelDisplay="auto"
+                  aria-labelledby="range-slider"
+                  getAriaValueText={this.valuetextTime}
+                />
                 <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
                   <Alarm />
                 </ToggleButton>