diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 311379f51d732186781d4c07aa1013ac8ec234e6..9c0c85f7bf3832a4f7b02e4d2d6652e59e7b014f 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -136,7 +136,7 @@ class AnnotationCreation extends Component {
       textEditorStateBustingKey: 0,
       // eslint-disable-next-line sort-keys,max-len
       // TO DO : The state must be updated with the video's timing information when the component is mounted
-      valueTime: [0, 13],
+      valueTime: [0, 1],
       xywh: null,
       ...annoState,
       valuetextTime: '',
@@ -371,6 +371,8 @@ class AnnotationCreation extends Component {
     const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
     if (mediaIsVideo) {
       mediaVideo = VideosReferences.get(windowId);
+      valueTime[0] = tstart;
+      valueTime[1] = tend;
     }
 
     return (
@@ -422,7 +424,7 @@ class AnnotationCreation extends Component {
                   onChange={this.handleChangeTime}
                   valueLabelDisplay="auto"
                   aria-labelledby="range-slider"
-                  getAriaValueText={this.valuetextTime}
+                  getAriaValueText={secondsToHMS}
                   max={mediaVideo ? mediaVideo.video.duration : null}
                   color="secondary"
                   classes={{
diff --git a/src/HMSInput.js b/src/HMSInput.js
index 06d7d4613c05ac4123cac682ee6043fb07bf3e40..70b487443721d5494082f0ebf15fadafd6b6f2fc 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -57,10 +57,13 @@ class HMSInput extends Component {
             name="hours"
             value={hours}
             onChange={this.someChange}
-            inputProps={{ style: {textAlign: 'center'} }}
+            inputProps={{ style: { textAlign: 'center' } }}
           />
-          <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} inputProps={{ style: {textAlign: 'center'} }}/>
-          <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} inputProps={{ style: {textAlign: 'center'} }}/>
+          <span className={classes.hmsLabel}>h</span>
+          <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
+          <span className={classes.hmsLabel}>m</span>
+          <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
+          <span className={classes.hmsLabel}>s</span>
         </div>
       </div>
     );
@@ -79,6 +82,9 @@ const styles = (theme) => ({
     flexDirection: 'column',
     justifyContent: 'center',
   },
+  hmsLabel: {
+    color: 'grey',
+  },
   // eslint-disable-next-line sort-keys
   input: {
     height: 'fit-content',