react-media-slider


Example
Demo

Description

React Slider for HTML5 audio and video. This library contains two
components: ProgressSlider and VolumeSlider. To create your own player
you only need to include these two components and call media.play()
of HTMLAudioElement

!Screenshot

Installation

Install with npm:

npm install react-media-slider

Usage

``js
import { ProgressSlider, VolumeSlider } from 'react-media-slider';

…

render() {
// Get HTMLAudioElement
const { audio } = this.state;
return (
…

…

…
}
}

`

$3

- media – HTMLAudioElement. Alternatively, you can
set it after render
- style – described below
- disableHint – disable time / volume hint above a slider

$3


You can override all attributes using "style" attribute. Here is a default value:
`json
{
"colors": {
"background": "rgba(0, 0, 0, .05)",
"progress": "rgba(0, 101, 225, .5)",
"controls": "#5796ce",
"buffered": "#ccc"
},
"container": {
"position": "relative",
"height": "10px",
"padding": "4px 0 10px",
"cursor": "pointer",
"WebkitTouchCallout": "none",
"WebkitUserSelect": "none",
"MozUserSelect": "none",
"MsUserSelect": "none",
"userSelect": "none",
"WebkitTapHighlightColor": "transparent"
},
"body": {
"height": "3px",
"position": "relative",
"background": "rgba(0, 0, 0, .05)"
},
"bufferedContainer": {
"position": "absolute",
"top": "0",
"left": "0",
"bottom": "0",
"right": "0"
},
"bufferedFragment": {
"display": "block",
"position": "absolute",
"height": "100%",
"background": "#ccc"
},
"progress": {
"position": "relative",
"height": "100%",
"background": "rgba(0, 101, 225, .5)"
},
"handle": {
"opacity": "0"
},
"handleHovered": {
"display": "block",
"float": "right",
"width": "10px",
"height": "10px",
"margin": "-3px -7px 0 0",
"borderRadius": "100%",
"opacity": "1",
"transition": "opacity .3s",
"background": "#5796ce"
},
"hint": {
"position": "absolute",
"opacity": "0",
"top": "-200px",
"display": "none"
},
"hintHovered": {
"position": "absolute",
"left": "0",
"top": "-28px",
"marginLeft": "2px",
"padding": ".2em .3em",
"transform": "translateX(-50%)",
"color": "#fff",
"borderRadius": "2px",
"fontSize": "80%",
"pointerEvents": "none",
"opacity": "1",
"transition": "opacity .3s",
"background": "#5796ce"
},
"hintArrow": {
"position": "absolute",
"left": "50%",
"bottom": "-11px",
"width": "0",
"height": "0",
"marginLeft": "-6px",
"border": "6px solid transparent",
"borderTopColor": "#5796ce"
}
}
``

License

Licensed under MIT.