Customize input range for progress bar?

Question

Custom progress bar for a player video with input crease, someone can give me some tips, I appreciate.

<input type="range" id="progress-bar" min="1" max="100" step="0.1" value="0"/>

Answer 1

Stylizing input[range]

input[type=range] {
  -webkit-appearance: none; /* remove estilo padrão do browser */
}

/* estiliza o marcador móvel */

/* Chrome/Safari/Opera */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* remove estilo padrão do browser */
  background: red;
  height: 15px;
  width: 10px;
}

/* Firefox */
input[type=range]::-moz-range-thumb {
  background: red;
  height: 15px;
  width: 10px;
}

/* IE */
input[type=range]::-ms-thumb {
  background: red;
  height: 15px;
  width: 10px;
}

/* estiliza a a barra do slider */

/* Chrome/Safari/Opera */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: blue;
}

/* Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  background: blue;
}

/* IE */
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  background: blue;
}

https://jsfiddle.net/6yop3c7x/1/

Answer 2

I believe you want to do some kind of time control of your video.

Taking into account that your code is incomplete and so should be put the video tag.

The video tag already comes by default with some basic controls, being your choice to disable them or not.

To disable these default browser controls is used: video.controls = false;

Then I added some functions to manipulate that time of the video, so that when passing the video can be changed in the input and so that when having change in the input can change the time of the video.

The element video has an event called timeupdate that is triggered when time in the currentTime video, which in turn is the property that allows you to change or view the current video time, the element video also owns the property duration showing in seconds the total time of the video.

var video = document.querySelector('.video'),
    range = document.querySelector('.range');

video.controls = false;

range.addEventListener('mousedown', function (event) {
  video.pause();
});

range.addEventListener('change', function (event) {
  video.currentTime = range.value / range.max * video.duration;
  video.play();
});

video.addEventListener('timeupdate', function (event) {
  var position = this.currentTime / this.duration;
  range.value = position * 1000;
});

.range {
  width: 400px;
}

<video class="video" width="400" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" autoplay>
  Your browser does not support HTML5 video.
</video>

<input class="range" type="range" value="0" max="1000">

Now it’s up to you!

How about adding some more controls such as pausing and starting...

Vale take a look at:
http://www.w3schools.com/html/html5_video.asp
http://www.w3schools.com/TAgs/av_prop_controls.asp
http://www.w3schools.com/jsref/dom_obj_video.asp