How to set a custom template?

[marcolino]

Would it be feasible to let users to add a custom template? I need to use your range selector in a form-group, so I need to show values inline (inside the control). So I thought I could put the values on the sliders, removing the arrows.

This is a screenshot of the result:

To accomplish this I had to modify css and the template. These are the simple changes:

custom.css:

.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:

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"?

[danielcrisp]

Sounds interesting, any idea how it could work?

Not sure how we could make the template customisable... perhaps it could be defined in a separate file so you can include your own version instead of the standard version. Not sure. Any thoughts?

[marcolino]

Yes, separate templates, each one in its own file... Though, probably I would hide this complication from the user: I would define some kind of (optional) attribute (say, for example: "mode": "standard" / "inline") to be added to the markup, which should settle the template and the css style files to be loaded...