Angular slider for alphabet range

Question

I am developing an angular website for a school. I am trying out slider for selecting classes.(class 1 to class 5).The classes are provided as arrays so when sliding is done start-class and end-class should be display.

Class Array:

$scope.classArry = [{
  "code": "LKG",
  "decode": "LKG"
}, {
  "code": "UKG",
  "decode": "UKG"
}, {
  "code": "1",
  "decode": "class 1"
}, {
  "code": "2",
  "decode": "class 2"
}, {
  "code": "3",
  "decode": "class 3"
}, {
  "code": "4",
  "decode": "class 4"
}, {
  "code": "5",
  "decode": "class 5"
}, {
  "code": "6",
  "decode": "class 6"
}, {
  "code": "7",
  "decode": "class 7"
}, {
  "code": "8",
  "decode": "class 8"
}, {
  "code": "9",
  "decode": "class 9"
}, {
  "code": "10",
  "decode": "class 10"
}, {
  "code": "11",
  "decode": "class 11"

},{ "code": "12", "decode": "class 12" } ];

When I drag from a class to other class the result should be like, class 1-class 10.

Answer 1

All you have to do is change the '$scope.validValues' in above plunker. I forked the above and it seems to be displaying the class names. Check here

'translate' function is your friend- you can do all sorts of manipulations here to display however you want.

$scope.validValues = [{
  "code": "LKG",
  "decode": "LKG"
}, {
  "code": "UKG",
  "decode": "UKG"
}, {
  "code": "1",
  "decode": "class 1"
}, {
  "code": "2",
  "decode": "class 2"
}, {
  "code": "3",
  "decode": "class 3"
}, {
  "code": "4",
  "decode": "class 4"
}, {
  "code": "5",
  "decode": "class 5"
}, {
  "code": "6",
  "decode": "class 6"
}, {
  "code": "7",
  "decode": "class 7"
}, {
  "code": "8",
  "decode": "class 8"
}, {
  "code": "9",
  "decode": "class 9"
}, {
  "code": "10",
  "decode": "class 10"
}, {
  "code": "11",
  "decode": "class 11"}
  ];

Answer 2

plunker link I have done something similar to this. Hoping that this might help you

var formattedSliderValidValues = 


 {
   floor: codeArray[0],
   ceil: codeArray[codeArray.length-1],        
   value: 0,
   maxVal:11,
   translate : translate,
   incrSpeed : incrFun,
   decrSpeed  : decrFun,
   codeArray : codeArray,
   stepArray : codeArray,
   valueArray : valueArray,
   selection : true,
  displayScale : true,
   typedValue: codeArray[0],
   hidePointerLabels: true
   };

return formattedSliderValidValues; };