Range from 1 to 5 with default step and 5 serifs

Code

var Slider = new RangeInputSlider(document.getElementById('slider-1'), {
    minPoint: 2,
    maxPoint: 4,
    min: 1,
    max: 5,
    onValueChangeStop: function (newValues) {
        var el = document.getElementById('values-1');
        if (el) {
            el.innerText = newValues.min + ' - ' + newValues.max;
        }
    },
    onValueChange: function (newValues) {
        var el = document.getElementById('values-1');
        if (el) {
            el.innerText =  newValues.min + ' - ' + newValues.max;
        }
    },
    serifs: [
        { position: 0, html: '1' },
        { position: 25, html: '2' },
        { position: 50, html: '3' },
        { position: 75, html: '4' },
        { position: 100, html: '5' }
    ]
});

Slider.init();
            

Range from 18 to 100 with default step and two serifs

Code

var Slider = new RangeInputSlider(document.getElementById('slider-2'), {
    minPoint: 18,
    maxPoint: 45,
    min: 18,
    max: 100,
    onValueChangeStop: function (newValues) {
        var el = document.getElementById('values-2');
        if (el) {
            el.innerText = newValues.min + ' - ' + newValues.max;
        }
    },
    onValueChange: function (newValues) {
        var el = document.getElementById('values-2');
        if (el) {
            el.innerText =  newValues.min + ' - ' + newValues.max;
        }
    },
    serifs: [
        { position: 0, html: '18' },
        { position: 100, html: '100' }
    ]
});

Slider.init();
            

Range from 1 to 100 with step 10 and 10 serifs with custom styles

Code

var Slider = new RangeInputSlider(document.getElementById('slider-3'), {
    minPoint: 20,
    maxPoint: 50,
    min: 1,
    max: 100,
    onValueChangeStop: function (newValues) {
        var el = document.getElementById('values-3');
        if (el) {
            el.innerText = newValues.min + ' - ' + newValues.max;
        }
    },
    onValueChange: function (newValues) {
        var el = document.getElementById('values-3');
        if (el) {
            el.innerText =  newValues.min + ' - ' + newValues.max;
        }
    },
    serifs: [
        { position: 0, html: '<span class="small-serif" style="color: red;">1</span>' },
        { position: 10, html: '<span class="small-serif">10</span>' },
        { position: 20, html: '<span class="small-serif">20</span>' },
        { position: 30, html: '<span class="small-serif">30</span>' },
        { position: 40, html: '<span class="small-serif">40</span>' },
        { position: 50, html: '<span class="small-serif" style="color: red;">50</span>' },
        { position: 60, html: '<span class="small-serif">60</span>' },
        { position: 70, html: '<span class="small-serif">70</span>' },
        { position: 80, html: '<span class="small-serif">80</span>' },
        { position: 90, html: '<span class="small-serif">90</span>' },
        { position: 100, html: '<span class="small-serif" style="color: red;">100</span>' }
    ]
});

Slider.init();
            

Range with custom styles

Unfortunately you need styles with higher priority then one class. Because I don't want to force you write all styles of element by yourself.

Code

var Slider = new RangeInputSlider(document.getElementById('slider-4'), {
    minPoint: 15,
    maxPoint: 45,
    min: 1,
    max: 100,
    onValueChangeStop: function (newValues) {
        var el = document.getElementById('values-4');
        if (el) {
            el.innerText = newValues.min + ' - ' + newValues.max;
        }
    },
    onValueChange: function (newValues) {
        var el = document.getElementById('values-4');
        if (el) {
            el.innerText =  newValues.min + ' - ' + newValues.max;
        }
    },
    serifs: [
        { position: 0, html: '1' },
        { position: 100, html: '100' }
    ],
    cssClasses: {
        wrapper: 'wrapper',
        lineWrapper: 'line-wrapper',
        line: 'line',
        control: 'control',
        activeRange: 'active-range',
        serifs: 'serifs',
        serif: 'serif'
    }
});

Slider.init();
            

CSS

.slider-4 .wrapper {
  background: darkblue;
  padding: 15px;
  margin-left: 30px;
}

.slider-4 .line {
  background: #a0a0a0;
}

.slider-4 .control {
  background: #ff6eec;
  border: 1px solid #cc005e;
}

.slider-4 .active-range {
  background: #37d3ff;
  border: 1px solid #3d45a9;
}

.slider-4 .serifs {
  left: -12px;
  top: 17px;
  right: -18px;
}

.slider-4 .serif {
  color: darkblue;
  font-weight: bold;
}