To accomplish this I had to modify css and the template.
These are the simple changes:
.ngrs-range-slider {
margin: 0;
padding-right: 10px;
}
.ngrs-range-slider .ngrs-runner {
height: 22px;
}
.ngrs-range-slider .ngrs-handle {
width: 24px;
text-align: right;
padding-right: 6px;
}
.ngrs-range-slider .ngrs-handle-min i {
background-image: url("");
}
.ngrs-range-slider .ngrs-handle-max i {
background-image: url("");
}
.ngrs-value-inline {
font-size: .9em;
}
template: ['<div class="ngrs-range-slider">',
'<div class="ngrs-runner">',
'<div class="ngrs-handle ngrs-handle-min"><i class="ngrs-value-inline">{{filteredModelMin}}</i></div>',
'<div class="ngrs-handle ngrs-handle-max"><i class="ngrs-value-inline">{{filteredModelMax}}</i></div>',
'<div class="ngrs-join"></div>',
'</div>',
'<div class="ngrs-value-runner">',
'<div class="ngrs-value ngrs-value-min" ng-show="showValues"><div>{{filteredModelMin}}</div></div>',
'<div class="ngrs-value ngrs-value-max" ng-show="showValues"><div>{{filteredModelMax}}</div></div>',
'</div>',
'</div>'
].join(''),
The css can be put in a .css file to be loaded after the original one.
The template is instead currently hardcoded in js script.
Would it be possible to add a parameter for users to load a custom template?
Or, in alternative, could you think of an option like "showValuesInHandles"?