diff --git a/README.md b/README.md
index 090e52d..a54088c 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,18 @@ Example Code
 				preventWheel={false}
 				minValue={minValue}
 				maxValue={maxValue}
+				{/* optional */}
+				minFormatter={(e) => 
+				  `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
+				{/* optional */}
+				maxFormatter={(e) =>
+				  `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
+				{/* optional */}
+				minValueFormatter={(e) =>
+				  `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
+				{/* optional */}
+				maxValueFormatter={(e) =>
+				  `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
 				onInput={(e) => {
 					handleInput(e);
 				}}
@@ -77,6 +89,8 @@ Example Code
 
 	export default App;
 
+`minFormatter`, `maxFormatter`, `minValueFormatter` and `maxValueFormatter` are assumed to be functions, which return a string or JSX Element for display. Returning a JSX Element or long strings requires overwriting the CSS for a good look.
+
 
 <br/><br/><br/><br/><br/>
 
diff --git a/src/App.js b/src/App.js
index e59f131..e27bf1b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,13 +27,17 @@ function App() {
 					ref={ref}
 					// baseClassName='multi-range-slider-black'
 					min={0}
-					max={100}
+					max={200}
 					step={5}
 					ruler={true}
 					label={true}
 					preventWheel={false}
 					minValue={minValue}
 					maxValue={maxValue}
+					minFormatter={(e) => `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
+					maxFormatter={(e) => `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
+					minValueFormatter={(e) => `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
+					maxValueFormatter={(e) => `${Math.floor(e / 60)}:${Math.round(e % 60).toString().padStart(2, '0')}`}
 					onInput={(e) => {
 						handleInput(e);
 					}}
@@ -49,7 +53,7 @@ function App() {
 				<MultiRangeSlider
 					baseClassName='multi-range-slider-black'
 					min={0}
-					max={100}
+					max={200}
 					step={5}
 					ruler={true}
 					label={true}
diff --git a/src/components/MultiRangeSlider.jsx b/src/components/MultiRangeSlider.jsx
index f613cd1..03f17d5 100644
--- a/src/components/MultiRangeSlider.jsx
+++ b/src/components/MultiRangeSlider.jsx
@@ -10,6 +10,10 @@ const MultiRangeSlider = React.forwardRef((props, ref) => {
 	const stepCount = (max - min) / step;
 	let ruler = props.ruler === undefined || props.ruler === null ? true : props.ruler;
 	let label = props.label === undefined || props.label === null ? true : props.label;
+	const minFormatter = props.minFormatter || ((e) => e);
+	const maxFormatter = props.maxFormatter || ((e) => e);
+	const minValueFormatter = props.minValueFormatter || ((e) => e);
+	const maxValueFormatter = props.maxValueFormatter || ((e) => e);
 
 	ruler = ruler === 'false' || !ruler ? false : true;
 	label = label === 'false' || !label ? false : true;
@@ -261,7 +265,7 @@ const MultiRangeSlider = React.forwardRef((props, ref) => {
 				<div className='bar-left' style={{ width: barMin + '%' }} onClick={onBarLeftClick}></div>
 				<input className='input-type-range input-type-range-min' type='range' min={min} max={max} step={step} value={minValue} onInput={onInputMinChange} />
 				<div className='thumb thumb-left' onMouseDown={onLeftThumbMousedown} onTouchStart={onLeftThumbMousedown}>
-					<div className='min-value'>{minValue}</div>
+					<div className='min-value'>{minValueFormatter(minValue)}</div>
 				</div>
 				<div className='bar-inner'>
 					<div className='bar-inner-left' onClick={onInnerBarLeftClick}></div>
@@ -269,7 +273,7 @@ const MultiRangeSlider = React.forwardRef((props, ref) => {
 				</div>
 				<input className='input-type-range input-type-range-max' type='range' min={min} max={max} step={step} value={maxValue} onInput={onInputMaxChange} />
 				<div className='thumb thumb-right' onMouseDown={onRightThumbMousedown} onTouchStart={onRightThumbMousedown}>
-					<div className='max-value'>{maxValue}</div>
+					<div className='max-value'>{maxValueFormatter(maxValue)}</div>
 				</div>
 				<div className='bar-right' style={{ width: barMax + '%' }} onClick={onBarRightClick}></div>
 			</div>
@@ -282,8 +286,8 @@ const MultiRangeSlider = React.forwardRef((props, ref) => {
 			)}
 			{label && (
 				<div className='label'>
-					<div className='label-min'>{min}</div>
-					<div className='label-max'>{max}</div>
+					<div className='label-min'>{minFormatter(min)}</div>
+					<div className='label-max'>{maxFormatter(max)}</div>
 				</div>
 			)}
 		</div>