how to create slider in portal?

[Jeslin]

hi friends,

I am beginner in ServiceNow.I have created a portal. And add catalog variable. My requirement is, corresponding to the variable I want display a slider in portal. There is no default type for slider. How can I implement this?

how can I implement this using macro or UI page. 

please help...

[ericgilmore]

I did something along this line a bit ago. Created a simple widget slider for a catalog item, but never really fully implemented it. Just decided to go another way. Hopefully some of this could help.

In Widget editor...

HTML

<div class="selectquant">
<!-- your widget template -->
  <!-- <label>Students</label> -->
  <input type="range" name="students" step="1" min="1" max="60" class="slider" id="myQuant">
  expected: <span id="value"></span>
</div>

---

CSS - SCSS

.selectquant {
    width: 100%;
}
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

---

Client Script

function($scope) {
  /* widget controller */
  var c = this;
	var slider = document.getElementById("myQuant");
	var output = document.getElementById("value");
	
	output.innerHTML = slider.value;

	slider.oninput = function() {
			output.innerHTML = this.value;
	}
}

---

Just the beginnings of something, hope it helps.