$(document).ready(function () { // $('#pnlRoofOrientation .slider').roundSlider({ // radius: 128, // value: 90, // max: "180", // width: 4, // handleSize: "+16", // circleShape: "half-bottom", // step: 10, // // showTooltip: false, // tooltipFormat: function (args) { // return (args.value - 90) + '°'; // }, //() {"tooltipFormatValue", // animation: false, // drag: function (args) { // // handle the drag event here // // console.log(args); // var value = args.value; // $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + (value ) + 'deg)'); // $('#pnlRoofOrientation input[name="roofOrientation"]').val(value - 90); // }, // change: function (args) { // // handle the change event here // var value = args.value; // $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + (value ) + 'deg)'); // $('#pnlRoofOrientation input[name="roofOrientation"]').val(value - 90); // } // }); // $('#pnlRoofOrientation .slider').roundSlider({ // radius: 128, // value: 270, // max: "360", // width: 4, // handleSize: "+16", // circleShape: "full", // step: 10, // // showTooltip: false, // tooltipFormat: function (args) { // console.log(args.value); // return ((args.value + 270) % 360) - 180 + '°'; // }, //() {"tooltipFormatValue", // animation: false, // drag: function (args) { // // handle the drag event here // // console.log(args); // var value = args.value; // $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + (value - 180) + 'deg)'); // $('#pnlRoofOrientation input[name="roofOrientation"]').val(value - 270); // }, // change: function (args) { // // handle the change event here // var value = args.value; // $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + (value - 180) + 'deg)'); // $('#pnlRoofOrientation input[name="roofOrientation"]').val(value - 270); // } // }); $('#pnlRoofOrientation .slider').roundSlider({ radius: 128, startAngle: 90, value: 0, min: "-180", max: "180", width: 4, handleSize: "+16", circleShape: "full", step: 10, editableTooltip: false, // showTooltip: false, tooltipFormat: function (args) { // console.log(args.value); // return ((args.value + 270) % 360) - 180 + '°'; return ((args.value )) + '°'; }, //() {"tooltipFormatValue", animation: false, drag: function (args) { // handle the drag event here // console.log(args); var value = args.value; $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + (value + 90) + 'deg)'); $('#pnlRoofOrientation input[name="roofOrientation"]').val(value); // $('.rs-tooltip-text').css('margin-top', '0'); }, change: function (args) { // handle the change event here var value = args.value; $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + (value + 90) + 'deg)'); $('#pnlRoofOrientation input[name="roofOrientation"]').val(value); // $('.rs-tooltip-text').css('margin-top', '0'); } }); // var obj = $('#pnlRoofOrientation .slider').data("roundSlider"); // obj.setValue(0); $('#pnlRoofOrientation .circle .roof').css('transform', 'rotate(' + 90 + 'deg)'); });