Range Column Type

12 of 124
ZingGrid provides a <zg-column type="range"> column type. This column type will automatically format numbers based on locale and user configuration. While editing the cell, the input field will be type number with min, max and step options.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    .zg-body zing-grid[loading] {
      height: 400px;
    }

    zing-grid[loading] {
      height: 451px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="<code>range</code> Column Type" search sort editor-controls>
    <zg-colgroup>
      <zg-column index="name" editor="disabled"></zg-column>
      <zg-column index="hourly_salary" type="range" type-range-min="10" type-range-max="225" type-range-step="0.25"></zg-column>
      <zg-column index="hourly_salary" header="Salary Without Column Type" editor="disabled"></zg-column>
    </zg-colgroup>
    <zg-data data='[
        {
          "id": 1,
          "name": "Philip J. Fry",
          "actor": "Billy West",
          "job": "Delivery Boy",
          "age": 1025,
          "hourly_salary": 11.25,
          "email": "philipJFried@aol.com",
          "telephone": "+18584905281",
          "birth_date": "9/14/1974",
          "main_character": true,
          "origin": "Earth",
          "home_town": "New York City",
          "gender": "male",
          "species": "Human",
          "place_of_origin": "New York City, New York, United States",
          "description": "Protagonist, from the 20th century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Philip_Fry.png",
          "first_episode": "Space Pilot 3000",
          "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000"
        },
        {
          "id": 2,
          "name": "Turanga Leela",
          "actor": "Katey Sagal",
          "job": "Captain",
          "age": 44,
          "hourly_salary": 150.00,
          "email": "tLeela@planetexpress.com",
          "telephone": "+18584905281",
          "birth_date": "7/29/2975",
          "main_character": true,
          "origin": "Earth",
          "home_town": "New New York City Sewers",
          "gender": "female",
          "species": "Mutant Human",
          "place_of_origin": "New York City, New York, United States",
          "description": "Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Turanga_Leela.png",
          "first_episode": "Space Pilot 3000",
          "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000"
        },
        {
          "id": 3,
          "name": "Bender Bending Rodriguez",
          "actor": "John DiMaggio",
          "job": "Chef",
          "age": 24000,
          "hourly_salary": 25.00,
          "email": "bRodriguez@planetexpress.com",
          "telephone": "+18584905281",
          "birth_date": "8/04/0001",
          "main_character": true,
          "origin": "Earth",
          "gender": "male",
          "species": "Robot",
          "description": "A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry`s best friend. Built in Tijuana, Mexico, he is the Planet Express Ship`s cook.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Bender_Rodriguez.png",
          "first_episode": "Space Pilot 3000",
          "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000"
        },
        {
          "id": 4,
          "name": "Amy Wong",
          "actor": "Lauren Tom",
          "job": "Intern",
          "age": 40,
          "hourly_salary": 14.75,
          "email": "aWong@hotmail.com",
          "telephone": "+18584905281",
          "birth_date": "05/04/2979",
          "main_character": true,
          "origin": "Mars",
          "gender": "Female",
          "species": "Alien",
          "description": "Intern. Holds her Ph.D in Applied Physics from Mars University. Wife of Kif Kroker.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Amy_Wong.png",
          "first_episode": "The Series Has Landed",
          "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed"
        },
        {
          "id": 5,
          "name": "Doctor John Zoidberg",
          "actor": "Billy West",
          "job": "Staff Doctor",
          "age": 92,
          "hourly_salary": 45.00,
          "email": "dr.JZoidberg@planetexpress.com",
          "telephone": "+18584905281",
          "birth_date": "5/05/2001",
          "main_character": true,
          "origin": "Decapod 10",
          "gender": "male",
          "species": "Alien",
          "description": "Alien from Decapod 10. Planet Express` staff doctor and steward. Has a medical degree and Ph.D in art history.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Dr_John_Zoidberg.png",
          "first_episode": "The Series Has Landed",
          "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed"
        },
        {
          "id": 6,
          "name": "Lord Nibbler",
          "actor": "Frank Welker",
          "job": "Ambassador to Earth",
          "age": 3294,
          "hourly_salary": 0.00,
          "email": "lordNibler@legend.com",
          "telephone": "+18584905281",
          "birth_date": "01/01/0001",
          "main_character": false,
          "origin": "Eternium",
          "gender": "male",
          "species": "Alien",
          "description": "Nibblonian ambassador to Earth. Poses as Leela`s pet.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/nibler.jpg",
          "first_episode": "Love`s Labours Lost in Space",
          "episode_link": "https://en.wikipedia.org/wiki/Love%27s_Labours_Lost_in_Space"
        }
      ]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="<code>range</code> Column Type"
      search
      sort
      editor-controls>
      <zg-colgroup>
        <zg-column index="name" editor="disabled"></zg-column>
        <zg-column index="hourly_salary" type="range" type-range-min="10" type-range-max="225" type-range-step="0.25"></zg-column>
        <zg-column index="hourly_salary" header="Salary Without Column Type"  editor="disabled"></zg-column>
      </zg-colgroup>
      <zg-data data='[
        {
          "id": 1,
          "name": "Philip J. Fry",
          "actor": "Billy West",
          "job": "Delivery Boy",
          "age": 1025,
          "hourly_salary": 11.25,
          "email": "philipJFried@aol.com",
          "telephone": "+18584905281",
          "birth_date": "9/14/1974",
          "main_character": true,
          "origin": "Earth",
          "home_town": "New York City",
          "gender": "male",
          "species": "Human",
          "place_of_origin": "New York City, New York, United States",
          "description": "Protagonist, from the 20th century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Philip_Fry.png",
          "first_episode": "Space Pilot 3000",
          "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000"
        },
        {
          "id": 2,
          "name": "Turanga Leela",
          "actor": "Katey Sagal",
          "job": "Captain",
          "age": 44,
          "hourly_salary": 150.00,
          "email": "tLeela@planetexpress.com",
          "telephone": "+18584905281",
          "birth_date": "7/29/2975",
          "main_character": true,
          "origin": "Earth",
          "home_town": "New New York City Sewers",
          "gender": "female",
          "species": "Mutant Human",
          "place_of_origin": "New York City, New York, United States",
          "description": "Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Turanga_Leela.png",
          "first_episode": "Space Pilot 3000",
          "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000"
        },
        {
          "id": 3,
          "name": "Bender Bending Rodriguez",
          "actor": "John DiMaggio",
          "job": "Chef",
          "age": 24000,
          "hourly_salary": 25.00,
          "email": "bRodriguez@planetexpress.com",
          "telephone": "+18584905281",
          "birth_date": "8/04/0001",
          "main_character": true,
          "origin": "Earth",
          "gender": "male",
          "species": "Robot",
          "description": "A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry`s best friend. Built in Tijuana, Mexico, he is the Planet Express Ship`s cook.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Bender_Rodriguez.png",
          "first_episode": "Space Pilot 3000",
          "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000"
        },
        {
          "id": 4,
          "name": "Amy Wong",
          "actor": "Lauren Tom",
          "job": "Intern",
          "age": 40,
          "hourly_salary": 14.75,
          "email": "aWong@hotmail.com",
          "telephone": "+18584905281",
          "birth_date": "05/04/2979",
          "main_character": true,
          "origin": "Mars",
          "gender": "Female",
          "species": "Alien",
          "description": "Intern. Holds her Ph.D in Applied Physics from Mars University. Wife of Kif Kroker.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Amy_Wong.png",
          "first_episode": "The Series Has Landed",
          "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed"
        },
        {
          "id": 5,
          "name": "Doctor John Zoidberg",
          "actor": "Billy West",
          "job": "Staff Doctor",
          "age": 92,
          "hourly_salary": 45.00,
          "email": "dr.JZoidberg@planetexpress.com",
          "telephone": "+18584905281",
          "birth_date": "5/05/2001",
          "main_character": true,
          "origin": "Decapod 10",
          "gender": "male",
          "species": "Alien",
          "description": "Alien from Decapod 10. Planet Express` staff doctor and steward. Has a medical degree and Ph.D in art history.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Dr_John_Zoidberg.png",
          "first_episode": "The Series Has Landed",
          "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed"
        },
        {
          "id": 6,
          "name": "Lord Nibbler",
          "actor": "Frank Welker",
          "job": "Ambassador to Earth",
          "age": 3294,
          "hourly_salary": 0.00,
          "email": "lordNibler@legend.com",
          "telephone": "+18584905281",
          "birth_date": "01/01/0001",
          "main_character": false,
          "origin": "Eternium",
          "gender": "male",
          "species": "Alien",
          "description": "Nibblonian ambassador to Earth. Poses as Leela`s pet.",
          "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/nibler.jpg",
          "first_episode": "Love`s Labours Lost in Space",
          "episode_link": "https://en.wikipedia.org/wiki/Love%27s_Labours_Lost_in_Space"
        }
      ]'></zg-data>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

.zg-body zing-grid[loading] {
  height:400px;
}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery