This repository has been archived by the owner on Mar 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathparams.json
1 lines (1 loc) · 5.03 KB
/
params.json
1
{"name":"Bootstrap-pricing-slider","tagline":"","body":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Bootstrap Pricing Slider</title>\r\n <link rel=\"stylesheet\" href=\"https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">\r\n <link rel=\"stylesheet\" href=\"https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\">\r\n <link rel=\"stylesheet\" href=\"css/styles.css\">\r\n\r\n </head>\r\n <body>\r\n <div class=\"container\">\r\n\r\n <div class=\"price-box\">\r\n\r\n <form class=\"form-horizontal form-pricing\" role=\"form\">\r\n\r\n <div class=\"price-slider\">\r\n <h4 class=\"great\">Amount</h4>\r\n <div class=\"col-sm-12\">\r\n <div id=\"slider\"></div>\r\n </div>\r\n </div>\r\n <div class=\"price-slider\">\r\n <h4 class=\"great\">Duration</h4>\r\n <div class=\"col-sm-12\">\r\n <div id=\"slider2\"></div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-form\">\r\n\r\n <div class=\"form-group\">\r\n <label for=\"amount\" class=\"col-sm-4 control-label\">Amount ($): </label>\r\n <div class=\"col-sm-8\">\r\n <input type=\"hidden\" id=\"amount\" class=\"form-control\">\r\n <p class=\"price lead\" id=\"amount-label\"></p>\r\n <span>.00</span>\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"duration\" class=\"col-sm-4 control-label\">Duration: </label>\r\n <div class=\"col-sm-8\">\r\n <input type=\"hidden\" id=\"duration\" class=\"form-control\">\r\n <p class=\"price lead\" id=\"duration-label\"></p>\r\n <span>.00</span>\r\n </div>\r\n </div>\r\n <hr class=\"style\">\r\n <div class=\"form-group\">\r\n <label for=\"total\" class=\"col-sm-4 control-label\">Total: </label>\r\n <div class=\"col-sm-8\">\r\n <input type=\"hidden\" id=\"total\" class=\"form-control\">\r\n <p class=\"price lead\" id=\"total-label\"></p>\r\n <span>.00</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <div class=\"col-sm-12\">\r\n <button type=\"submit\" class=\"btn btn-primary btn-lg btn-block\">Proceed <span class=\"glyphicon glyphicon-chevron-right pull-right\" style=\"padding-right: 10px;\"></span></button>\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <div class=\"col-sm-12\">\r\n <img src=\"images/payment.png\" class=\"img-responsive payment\" />\r\n </div>\r\n </div>\r\n\r\n </form>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></script>\r\n <script src=\"https://code.jquery.com/ui/1.10.4/jquery-ui.min.js\"></script>\r\n <script src=\"https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js\"></script>\r\n\r\n <script>\r\n $(document).ready(function() {\r\n $(\"#slider\").slider({\r\n animate: true,\r\n value:1,\r\n min: 0,\r\n max: 1000,\r\n step: 10,\r\n slide: function(event, ui) {\r\n update();\r\n }\r\n });\r\n\r\n $(\"#slider2\").slider({\r\n animate: true,\r\n value:0,\r\n min: 0,\r\n max: 500,\r\n step: 1,\r\n slide: function(event, ui) {\r\n update();\r\n }\r\n });\r\n \r\n update();\r\n });\r\n\r\n function update() {\r\n $amount = $( \"#slider\" ).slider( \"value\" );\r\n $duration = $( \"#slider2\" ).slider( \"value\" );\r\n $total = \"$\" + ($amount + $duration);\r\n $( \"#amount\" ).val($amount);\r\n $( \"#amount-label\" ).text($amount);\r\n $( \"#duration\" ).val($duration);\r\n $( \"#duration-label\" ).text($duration);\r\n $( \"#total\" ).val($total);\r\n $( \"#total-label\" ).text($total);\r\n\r\n $('#slider a').html('<label><span class=\"glyphicon glyphicon-chevron-left\"></span> '+$amount+' <span class=\"glyphicon glyphicon-chevron-right\"></span></label>');\r\n $('#slider2 a').html('<label><span class=\"glyphicon glyphicon-chevron-left\"></span> '+$duration+' <span class=\"glyphicon glyphicon-chevron-right\"></span></label>');\r\n }\r\n\r\n </script>\r\n </body>\r\n</html>","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}