Range Selector ▸ Numeric Scale (Lightweight)

This demo illustrates a numeric scale. Here, the currency format is applied to the scale labels and the slider markers.

@(Html.DevExtreme().RangeSelector()
    .ID("range-selector")
    .Margin(m => m.Top(50))
    .Scale(s => s
        .StartValue(15000)
        .EndValue(150000)
        .MinorTickInterval(500)
        .TickInterval(15000)
        .MinorTick(m => m.Visible(false))
        .Label(f => f.Format(Format.Currency))
    )
    .SliderMarker(f => f.Format(Format.Currency))
    .Value(new[] { 40000.0, 80000.0 })
    .Title("Select House Price Range")
)

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Linq;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class RangeSelectorController : Controller {

        public ActionResult NumericScaleLightweight() {
            return View();
        }

    }
}

#range-selector {
    height: 210px;
}