Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Range Slider / How To / Customize Slider as MSWord
Search results

Customize Slider as MSWord in Angular Range Slider component

21 Dec 2022 / 2 minutes to read

Slider view can be customized via CSS. By overriding the slider CSS classes, you can customize the slider buttons and thumbs. The ticks in slider allows you to easily identify the value in the slider.

Here we are going to achieve the Slider as like the below screenshot.

Slider MSWord Customization

By default, slider has even split values in ticks. And we can achive slider ticks value as like above image. To achieve this we can use customValues to render the Ticks. Refer to the below code snippet to display needed ticks in slider.

Copied to clipboard
public renderedTicks(event) {
    event.tickElements.forEach((element) => {
      if (element.title !== '10' && element.title !== '100' && element.title !== '500') {
        element.classList.add('e-display-none');
      }
    })
  }
}

To customize the Slider handle, refer to the below code snippet.

Copied to clipboard
#slider.e-control.e-slider .e-handle {
    height: 25px;
    width: 8px;
    top: 3px;
    margin-left: -4px;
    border-radius: 1px;
    background-color:#ccc;
}

To customize the Slider Button, refer to the below code snippet.

Copied to clipboard
.e-control-wrapper.e-slider-container .e-slider-button{
    border: 0px;
}
  
.e-control-wrapper.e-slider-container.e-horizontal .e-second-button .e-button-icon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADKSURBVGhD7dqxDYMwEIXhc9aicec1KFiAziN4C7MJjOCWaUicXFwihJGeTnqfhMAFxQ+ywAh3fIhhL92b9VjAtm3inLu0LcuiZ/XjHUBjABoD0BiAxgA0BqAxAM18QFuR1ff5HqUUmedZR+dijBJC0NE93vvvvgXUhYYl/5Uw5wAaA9AYgMYANPMB7Unc+7lv33dJKeno3DRNMgyDju4Zx/F3UAOesK5rvRCXtpyzntWPcwCNAWgMQGMAGgPQGIDGADTzAfxbBUvkDXe7zQJva1o6AAAAAElFTkSuQmCC');
  }
  
.e-control-wrapper.e-slider-container.e-horizontal .e-first-button .e-button-icon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB1SURBVGhD7dfBCcAgEAVRk2aszmqszmpMWIItDD/MuyzsbQ4Leu1XC3Z/M5YBNANoBtAMoBlAM4BmAM0A2vmRzTlrkWKMUfME9N5rkWKtVdMboBlAM4BmAC0+4D9PiVTeAM0AmgE0A2gG0AygGUAzgBYe0NoDs18dSCJjSCYAAAAASUVORK5CYII=');
  }
Copied to clipboard
#slider.e-control.e-slider .e-handle {
  height: 25px;
  width: 8px;
  top: 3px;
  margin-left: -4px;
  border-radius: 1px;
  background-color:#ccc;
}
.e-control-wrapper.e-slider-container .e-slider .e-handle.e-large-thumb-size{
  transform: none;
}
.e-control-wrapper.e-slider-container .e-slider-button{
  border: 0px;
}

.e-control-wrapper.e-slider-container.e-horizontal .e-second-button .e-button-icon {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADKSURBVGhD7dqxDYMwEIXhc9aicec1KFiAziN4C7MJjOCWaUicXFwihJGeTnqfhMAFxQ+ywAh3fIhhL92b9VjAtm3inLu0LcuiZ/XjHUBjABoD0BiAxgA0BqAxAM18QFuR1ff5HqUUmedZR+dijBJC0NE93vvvvgXUhYYl/5Uw5wAaA9AYgMYANPMB7Unc+7lv33dJKeno3DRNMgyDju4Zx/F3UAOesK5rvRCXtpyzntWPcwCNAWgMQGMAGgPQGIDGADTzAfxbBUvkDXe7zQJva1o6AAAAAElFTkSuQmCC');
}

.e-control-wrapper.e-slider-container.e-horizontal .e-first-button .e-button-icon {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB1SURBVGhD7dfBCcAgEAVRk2aszmqszmpMWIItDD/MuyzsbQ4Leu1XC3Z/M5YBNANoBtAMoBlAM4BmAM0A2vmRzTlrkWKMUfME9N5rkWKtVdMboBlAM4BmAC0+4D9PiVTeAM0AmgE0A2gG0AygGUAzgBYe0NoDs18dSCJjSCYAAAAASUVORK5CYII=');
}

#label {
  display: inline-block;
}
#text {
  width: 90%;
  display: inline-block;
}

.e-control-wrapper.e-slider-container .e-tick-after.e-scale.e-h-scale .e-tick {
  background: none;
}

.e-control-wrapper.e-slider-container .e-tick-after.e-scale.e-h-scale .e-tick.e-display-none span{
  visibility: hidden;
}

.middle {
  width: 400px;
}

.first {
  width: 360px;
  display: inline-block;
}

.second {
  display: inline-block;
  position: relative;
  top: -18px;
  left: 10px;
}
Copied to clipboard
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="container">
        <div id="text">
            <label for="slider">Slider</label>
            <br/> <br/> <br/>
            <div class="middle">
                <div class="first">
                    <ejs-slider id='slider' width="300" [customValues]='customvalues'  [showButtons]=true [(ngModel)]="slidervalue" name="slider" required #slider="ngModel" [ticks]='ticks' (change)="change($event)" (renderedTicks)='renderedTicks($event)'>
                    </ejs-slider>
                </div>
                <div class="second">
                    <span for="slider">{{value}}</span>
                </div>
            </div>
        </div>
    </div>`,
    styleUrls : ["app/app.component.css"]
})

export class AppComponent {
   public slidervalue = 3;
   public customvalues = [10, 20, 30, 100, 250, 400, 500];

   public ticks = {
    placement: 'After',
  };

  public value = this.customvalues[this.slidervalue];

  public change(args) {
    this.value = this.customvalues[args.value];
  }

  public renderedTicks(event) {
    event.tickElements.forEach((element) => {
      if (element.title !== '10' && element.title !== '100' && element.title !== '500') {
        element.classList.add('e-display-none');
      }
    })
  }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, FormsModule,
        SliderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}
Range Slider / Time range slider
Range Slider / Show Slider From Hidden State