JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-time">
                        <p>
                            <label for="timeRange" style="font-family: Arial,Helvetica,clean,sans-serif; font-size:0.8em; color:#9D9EA0;">Filter by duration:</label>
                            <input type="text" id="timeRange" style="border:0; color:#ED567C; font-weight:bold; background-color:#000;font-size:0.8em;" />
                            <input type="hidden" id="min_minutes" name="min_minutes" value="0" />
                            <input type="hidden" id="max_minutes" name="max_minutes" value="5" />
                        </p>

                        <div id="slider-range"></div>
                    </div>

CSS

/*!
 * jQuery UI CSS Framework 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=ee577c&bgTextureHeader=01_flat.png&bgImgOpacityHeader=100&borderColorHeader=3d3d3d&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=01_flat.png&bgImgOpacityDefault=100&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=01_flat.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 */


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget-content { border: 1px solid #3D3D3D; background-color: #202020; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #3d3d3d;...

JavaScript

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 60,
        values: [ 5, 55 ],
        slide: function( event, ui ) {
            if ( ui.values[ 0 ] == ui.values[ 1 ]  )
                return false;

            $( "#min_minutes" ).val(  ui.values[ 0 ] );
            $( "#max_minutes" ).val(  ui.values[ 1 ] );

            if ( ui.values[ 1 ] == 60 ){
                $( "#timeRange" ).val(  ui.values[ 0 ] + " min - " + ui.values[ 1 ]+"+ min" );
            } else {
                $( "#timeRange" ).val(  ui.values[ 0 ] + " min - " + ui.values[ 1 ]+" min" );
                    }
                }
            });

            $( "#min_minutes" ).val(  $( "#slider-range" ).slider( "values", 0 ) );
            $( "#max_minutes" ).val(  $( "#slider-range" ).slider( "values", 1 ) );

            $( "#timeRange" ).val( $( "#slider-range" ).slider( "values", 0 ) + " min - " + $( "#slider-range" ).slider( "values", 1 )+" min" );

            $('select').selectToUISlider({tooltip:false});
    });