Отключенная часть слайдера

Question

Я хотел бы спросить, можно ли отключить часть слайдера?Который будет выглядеть так:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="range" min="172" max="400" value="400" class="mdl-slider mdl-js-slider " id="range1">

В этом примере ползунок начнется с 0, но в диапазоне от 0 до 172 мы не можем получить к нему доступ, поэтому новый минимум - 172. Может быть, мне нужноиспользовать второй слайдер?

РЕДАКТИРОВАТЬ:

Я нашел пример для jquery UI.

$('#slider').slider({
    value: 50,
    range: false,
    slide: function(event, ui) {
        if(ui.value > 75 && ui.value <= 100){
            return false;
        }
        if(ui.value >= 0 && ui.value <= 25){
            return false;
        }
    }
});

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">

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