Slider

Attribute

[Slider(1, 10)]     // 1-10, step 1
[Slider(1, 10, 2)]  // 1-10, step 2

Template result

<input name="PropertyExtra" type="number" min="1" max="10" step="2" class="isextra" oninput="this.nextElementSibling.value = this.value" />
<input name="Property" type="range" min="1" max="10" step="2" class="hasextra" oninput="this.previousElementSibling.value = this.value" />

Notes

This is display attribute, not validation attribute. It's recommended to use the appropriate [Range] validation attribute on the property as well.

Template will render two inputs, one as numeric textbox and one as slider. Their value are synchronized via JavaScript. The name of other input has Extra suffix added and should be ignored by server. Use ExtraFieldSuffix property to set the name yourself.

You are supposed to visually format the fields using CSS, ie:

input.hasextra {
    width: calc(100% - 4em);
}

input.isextra {
    float: right;
    width: 3em;
}