“Slidy” Live Demo by “Vinh Nguyen” v1.0

---

“Slidy Live Demo”

---

Table of Contents

1. Default using
2. Custom parameter
3. Custom theme

---

1) Default Using - top

• Example 1.1

  HTML

            <div id="rating-1"></div>
          

  JavaScript

            $('#rating-11').slidy();
          

  Result

---

2) Custom parameter - top

• Example 2.1

  HTML

            <div id="rating-21"></div>
  
            <div id="result-21"></div>
          

  JavaScript

            $('#rating-21').slidy({
              maxval: 24, interval: 1, defaultValue: 8, 
              finishedCallback: function (value) {
                $('#result-21').html('You selected: ' + value);
              }
            });
          

  Result

• Example 2.2

  HTML

            <div id="rating-22"></div>
            <div id="result-22"></div>
            <div id="currentval-22"></div>
  
          

  JavaScript

            $('#rating-22').slidy({
              maxval: 12, interval: 1, defaultValue: 4, 
              finishedCallback: function (value) {
                $('#result-22').html('You selected: ' + value);
              },
              moveCallback: function (value) {
                $('#currentval-22').html('<strong>' + value + '</strong>');
              }
            });
          

  Result

---

3) Custom theme - top

• Example 3.1

  HTML

            <div id="rating-31"></div>
            <div id="result-31"></div>
          

  JavaScript

            $('#rating-31').slidy({
              theme: {
                image: 'themes/red.png',
                width: 161,
                height: 34
              },
              maxval: 10,
              interval: 1,
              defaultValue: 1,
              finishedCallback: function (value) {
                $('#result-31').html('You selected ' + value);
              }
            });
          

  Result

• Example 3.2

  Apply slidy on many elements! In this case, we apply slidy to all element with class "rating-32"

  HTML

  
            <div class="rating-32"></div>
            <div class="rating-32"></div>
          

  JavaScript

  
            $('.rating-32').slidy({
              theme: {
                image: 'themes/red.png',
                width: 161,
                height: 34
              },
              maxval: 10,
              interval: 1,
              defaultValue: 1,
              finishedCallback: function (value) {
                $('#currentval-32').html('You selected ' + value + '')
              },
              moveCallback: function (value) {
                $('#currentval-32').html('<strong>' + value + '</strong>')
              }
            });
          

  Result

  First one

  Second One

---

---

Once again, thank you so much for purchasing this plugin.

I'd be glad to help you if you have any questions relating to this plugin such as custom background,... I don't guarantees anything, but I'll do my best to assist.

Vinh Nguyen

Go To Table of Contents

---