privdayz.com

$(function () {
    // Handles
    var handlesSlider = document.getElementById("slider-handles");
  
    noUiSlider.create(handlesSlider, {
      start: [4000, 8000],
      range: {
        min: [2000],
        max: [10000],
      },
    });
  
    // Range
    var rangeSlider = document.getElementById("slider-range");
  
    noUiSlider.create(rangeSlider, {
      start: [4000],
      range: {
        min: [2000],
        max: [10000],
      },
    });
  
    // Stepping and snapping to values
    var stepSlider = document.getElementById("slider-step");
  
    noUiSlider.create(stepSlider, {
      start: [4000],
      step: 1000,
      range: {
        min: [2000],
        max: [10000],
      },
    });
  
    // Non-linear sliders
    var nonLinearSlider = document.getElementById("slider-non-linear");
  
    noUiSlider.create(nonLinearSlider, {
      start: [4000],
      range: {
        min: [2000],
        "30%": [4000],
        "70%": [8000],
        max: [10000],
      },
    });
  
    // Stepping in non-linear sliders
    var nonLinearStepSlider = document.getElementById("slider-non-linear-step");
  
    noUiSlider.create(nonLinearStepSlider, {
      start: [500, 4000],
      range: {
        min: [0],
        "10%": [500, 500],
        "50%": [4000, 1000],
        max: [10000],
      },
    });
  
    // Snapping between steps
    var snapSlider = document.getElementById("slider-snap");
  
    noUiSlider.create(snapSlider, {
      start: [0, 500],
      snap: true,
      connect: true,
      range: {
        min: 0,
        "10%": 50,
        "20%": 100,
        "30%": 150,
        "40%": 500,
        "50%": 800,
        max: 1000,
      },
    });
  
    // Tap
    tapSlider = document.getElementById("tap");
  
    noUiSlider.create(tapSlider, {
      start: 40,
      behaviour: "tap",
      connect: "upper",
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Drag
    var dragSlider = document.getElementById("drag");
  
    noUiSlider.create(dragSlider, {
      start: [40, 60],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Fixed dragging
    dragFixedSlider = document.getElementById("drag-fixed");
  
    noUiSlider.create(dragFixedSlider, {
      start: [40, 60],
      behaviour: "drag-fixed",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Snap
    snapSlider = document.getElementById("snap");
  
    noUiSlider.create(snapSlider, {
      start: 40,
      behaviour: "snap",
      connect: "lower",
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Hover
    var hoverSlider = document.getElementById("hover"),
      field = document.getElementById("hover-val");
  
    noUiSlider.create(hoverSlider, {
      start: 20,
      behaviour: "hover-snap",
      range: {
        min: 0,
        max: 10,
      },
    });
  
    hoverSlider.noUiSlider.on("hover", function (value) {
      field.innerHTML = value;
    });
  
    // Combined options
    dragTapSlider = document.getElementById("combined");
  
    noUiSlider.create(dragTapSlider, {
      start: [40, 60],
      behaviour: "drag-tap",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    var range_all_sliders = {
      min: [0],
      "10%": [5, 5],
      "50%": [40, 10],
      max: [100],
    };
  
    // Range
    var pipsRange = document.getElementById("pips-range"),
      pipsRangeRtl = document.getElementById("pips-range-rtl");
  
    noUiSlider.create(pipsRange, {
      range: range_all_sliders,
      start: 0,
      pips: {
        mode: "range",
        density: 3,
      },
    });
  
    noUiSlider.create(pipsRangeRtl, {
      range: range_all_sliders,
      start: 0,
      direction: "rtl",
      pips: {
        mode: "range",
        density: 3,
      },
    });
  
    // Steps
  
    function filter500(value, type) {
      return value % 1000 ? 2 : 1;
    }
  
    var pipsStepsFilter = document.getElementById("pips-steps-filter");
  
    noUiSlider.create(pipsStepsFilter, {
      range: range_all_sliders,
      start: 0,
      pips: {
        mode: "steps",
        density: 3,
        filter: filter500,
        format: wNumb({
          decimals: 2,
          prefix: "$",
        }),
      },
    });
  
    // Default
    var defaultColorSlider = document.getElementById("default-color-slider");
  
    noUiSlider.create(defaultColorSlider, {
      start: [45, 55],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Success
    var successColorSlider = document.getElementById("success-color-slider");
  
    noUiSlider.create(successColorSlider, {
      start: [40, 60],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Info
    var infoColorSlider = document.getElementById("info-color-slider");
  
    noUiSlider.create(infoColorSlider, {
      start: [35, 65],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Warning
    var warningColorSlider = document.getElementById("warning-color-slider");
  
    noUiSlider.create(warningColorSlider, {
      start: [45, 55],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Danger
    var dangerColorSlider = document.getElementById("danger-color-slider");
  
    noUiSlider.create(dangerColorSlider, {
      start: [40, 60],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Custom Color
    var customColorSlider = document.getElementById("custom-color-slider");
  
    noUiSlider.create(customColorSlider, {
      start: [35, 65],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    });
  
    // Extra large options
    var xl_options = {
      start: [45, 55],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var lg_options = {
      start: [40, 60],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var default_options = {
      start: [35, 65],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var sm_options = {
      start: [30, 70],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var xs_options = {
      start: [25, 75],
      behaviour: "drag",
      connect: true,
      range: {
        min: 20,
        max: 80,
      },
    };
  
    // Extra Large
    var extraLargeSlider = document.getElementById("extra-large-slider");
    var circleExtraLargeSlider = document.getElementById(
      "circle-extra-large-slider"
    );
    var squareExtraLargeSlider = document.getElementById(
      "square-extra-large-slider"
    );
  
    noUiSlider.create(extraLargeSlider, xl_options);
    noUiSlider.create(circleExtraLargeSlider, xl_options);
    noUiSlider.create(squareExtraLargeSlider, xl_options);
  
    // Large
    var largeSlider = document.getElementById("large-slider");
    var circleLargeSlider = document.getElementById("circle-large-slider");
    var squareLargeSlider = document.getElementById("square-large-slider");
  
    noUiSlider.create(largeSlider, lg_options);
    noUiSlider.create(circleLargeSlider, lg_options);
    noUiSlider.create(squareLargeSlider, lg_options);
  
    // Default
    var defaultSlider = document.getElementById("default-slider");
    var circleDefaultSlider = document.getElementById("circle-default-slider");
    var squareDefaultSlider = document.getElementById("square-default-slider");
  
    noUiSlider.create(defaultSlider, default_options);
    noUiSlider.create(circleDefaultSlider, default_options);
    noUiSlider.create(squareDefaultSlider, default_options);
  
    // Small
    var smallSlider = document.getElementById("small-slider");
    var circleSmallSlider = document.getElementById("circle-small-slider");
    var squareSmallSlider = document.getElementById("square-small-slider");
  
    noUiSlider.create(smallSlider, sm_options);
    noUiSlider.create(circleSmallSlider, sm_options);
    noUiSlider.create(squareSmallSlider, sm_options);
  
    // Extra Small
    var extraSmallSlider = document.getElementById("extra-small-slider");
    var circleExtraSmallSlider = document.getElementById(
      "circle-extra-small-slider"
    );
    var squareExtraSmallSlider = document.getElementById(
      "square-extra-small-slider"
    );
  
    noUiSlider.create(extraSmallSlider, xs_options);
    noUiSlider.create(circleExtraSmallSlider, xs_options);
    noUiSlider.create(squareExtraSmallSlider, xs_options);
  
    // Default
    var vertical_slider_1 = document.getElementById("slider-vertical-1");
  
    noUiSlider.create(vertical_slider_1, {
      start: 20,
      orientation: "vertical",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var vertical_slider_2 = document.getElementById("slider-vertical-2");
  
    noUiSlider.create(vertical_slider_2, {
      start: 50,
      orientation: "vertical",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var vertical_slider_3 = document.getElementById("slider-vertical-3");
  
    noUiSlider.create(vertical_slider_3, {
      start: 20,
      orientation: "vertical",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var vertical_slider_4 = document.getElementById("slider-vertical-4");
  
    noUiSlider.create(vertical_slider_4, {
      start: 50,
      orientation: "vertical",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var vertical_slider_5 = document.getElementById("slider-vertical-5");
  
    noUiSlider.create(vertical_slider_5, {
      start: 20,
      orientation: "vertical",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    // Connect to lower
    var connectLowerSlider1 = document.getElementById("connect-lower-1");
  
    noUiSlider.create(connectLowerSlider1, {
      start: 30,
      orientation: "vertical",
      connect: "lower",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectLowerSlider2 = document.getElementById("connect-lower-2");
  
    noUiSlider.create(connectLowerSlider2, {
      start: 40,
      orientation: "vertical",
      connect: "lower",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectLowerSlider3 = document.getElementById("connect-lower-3");
  
    noUiSlider.create(connectLowerSlider3, {
      start: 50,
      orientation: "vertical",
      connect: "lower",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectLowerSlider4 = document.getElementById("connect-lower-4");
  
    noUiSlider.create(connectLowerSlider4, {
      start: 60,
      orientation: "vertical",
      connect: "lower",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectLowerSlider5 = document.getElementById("connect-lower-5");
  
    noUiSlider.create(connectLowerSlider5, {
      start: 70,
      orientation: "vertical",
      connect: "lower",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    // Connect to upper
    var connectUpperSlider1 = document.getElementById("connect-upper-1");
  
    noUiSlider.create(connectUpperSlider1, {
      start: 30,
      orientation: "vertical",
      connect: "upper",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectUpperSlider2 = document.getElementById("connect-upper-2");
  
    noUiSlider.create(connectUpperSlider2, {
      start: 40,
      orientation: "vertical",
      connect: "upper",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectUpperSlider3 = document.getElementById("connect-upper-3");
  
    noUiSlider.create(connectUpperSlider3, {
      start: 50,
      orientation: "vertical",
      connect: "upper",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectUpperSlider4 = document.getElementById("connect-upper-4");
  
    noUiSlider.create(connectUpperSlider4, {
      start: 60,
      orientation: "vertical",
      connect: "upper",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var connectUpperSlider5 = document.getElementById("connect-upper-5");
  
    noUiSlider.create(connectUpperSlider5, {
      start: 70,
      orientation: "vertical",
      connect: "upper",
      range: {
        min: 0,
        max: 100,
      },
    });
  
    // Tooltips
    var tooltipSlider1 = document.getElementById("slider-tooltips-1");
  
    noUiSlider.create(tooltipSlider1, {
      start: [20, 80],
      orientation: "vertical",
      tooltips: [
        false,
        wNumb({
          decimals: 1,
        }),
      ],
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var tooltipSlider2 = document.getElementById("slider-tooltips-2");
  
    noUiSlider.create(tooltipSlider2, {
      start: [20, 80],
      orientation: "vertical",
      tooltips: [
        false,
        wNumb({
          decimals: 1,
        }),
      ],
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var tooltipSlider3 = document.getElementById("slider-tooltips-3");
  
    noUiSlider.create(tooltipSlider3, {
      start: [20, 80],
      orientation: "vertical",
      tooltips: [
        false,
        wNumb({
          decimals: 1,
        }),
      ],
      range: {
        min: 0,
        max: 100,
      },
    });
  
    // Direction top to bottom
    var directionTopBottom1 = document.getElementById(
      "slider-direction-top-bottom-1"
    );
  
    noUiSlider.create(directionTopBottom1, {
      range: range_all_sliders,
      start: 30,
      connect: "lower",
      orientation: "vertical",
      pips: {
        mode: "range",
        density: 5,
      },
    });
  
    var directionTopBottom2 = document.getElementById(
      "slider-direction-top-bottom-2"
    );
  
    noUiSlider.create(directionTopBottom2, {
      range: range_all_sliders,
      start: 50,
      connect: "lower",
      orientation: "vertical",
      pips: {
        mode: "range",
        density: 5,
      },
    });
  
    var directionTopBottom3 = document.getElementById(
      "slider-direction-top-bottom-3"
    );
  
    noUiSlider.create(directionTopBottom3, {
      range: range_all_sliders,
      start: 70,
      connect: "lower",
      orientation: "vertical",
      pips: {
        mode: "range",
        density: 5,
      },
    });
  
    // Direction bottom to top
    var directionBottomTop1 = document.getElementById(
      "slider-direction-bottom-top-1"
    );
  
    noUiSlider.create(directionBottomTop1, {
      range: range_all_sliders,
      start: 70,
      connect: "lower",
      orientation: "vertical",
      direction: "rtl",
      pips: {
        mode: "range",
        density: 5,
      },
    });
  
    var directionBottomTop2 = document.getElementById(
      "slider-direction-bottom-top-2"
    );
  
    noUiSlider.create(directionBottomTop2, {
      range: range_all_sliders,
      start: 50,
      connect: "lower",
      orientation: "vertical",
      direction: "rtl",
      pips: {
        mode: "range",
        density: 5,
      },
    });
  
    var directionBottomTop3 = document.getElementById(
      "slider-direction-bottom-top-3"
    );
  
    noUiSlider.create(directionBottomTop3, {
      range: range_all_sliders,
      start: 30,
      connect: "lower",
      orientation: "vertical",
      direction: "rtl",
      pips: {
        mode: "range",
        density: 5,
      },
    });
  
    // Margin
    var verticalMarginSlider1 = document.getElementById("vertical-margin-1");
  
    noUiSlider.create(verticalMarginSlider1, {
      start: [40, 60],
      orientation: "vertical",
      margin: 20,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalMarginSlider2 = document.getElementById("vertical-margin-2");
  
    noUiSlider.create(verticalMarginSlider2, {
      start: [35, 65],
      orientation: "vertical",
      margin: 30,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalMarginSlider3 = document.getElementById("vertical-margin-3");
  
    noUiSlider.create(verticalMarginSlider3, {
      start: [30, 70],
      orientation: "vertical",
      margin: 30,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalMarginSlider4 = document.getElementById("vertical-margin-4");
  
    noUiSlider.create(verticalMarginSlider4, {
      start: [25, 75],
      orientation: "vertical",
      margin: 30,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalMarginSlider5 = document.getElementById("vertical-margin-5");
  
    noUiSlider.create(verticalMarginSlider5, {
      start: [20, 80],
      orientation: "vertical",
      margin: 30,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    // Limit
    var verticalLimitSlider1 = document.getElementById("vertical-limit-1");
  
    noUiSlider.create(verticalLimitSlider1, {
      start: [40, 60],
      orientation: "vertical",
      limit: 40,
      behaviour: "drag",
      connect: true,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalLimitSlider2 = document.getElementById("vertical-limit-2");
  
    noUiSlider.create(verticalLimitSlider2, {
      start: [35, 65],
      orientation: "vertical",
      limit: 40,
      behaviour: "drag",
      connect: true,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalLimitSlider3 = document.getElementById("vertical-limit-3");
  
    noUiSlider.create(verticalLimitSlider3, {
      start: [30, 70],
      orientation: "vertical",
      limit: 50,
      behaviour: "drag",
      connect: true,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalLimitSlider4 = document.getElementById("vertical-limit-4");
  
    noUiSlider.create(verticalLimitSlider4, {
      start: [25, 75],
      orientation: "vertical",
      limit: 50,
      behaviour: "drag",
      connect: true,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    var verticalLimitSlider5 = document.getElementById("vertical-limit-5");
  
    noUiSlider.create(verticalLimitSlider5, {
      start: [20, 80],
      orientation: "vertical",
      limit: 70,
      behaviour: "drag",
      connect: true,
      range: {
        min: 0,
        max: 100,
      },
    });
  
    // Step
    var stepsOptions = {
      start: [20, 80],
      orientation: "vertical",
      step: 10,
      range: {
        min: 0,
        max: 100,
      },
    };
  
    var verticalStepSlider1 = document.getElementById("vertical-steps-1");
    noUiSlider.create(verticalStepSlider1, stepsOptions);
  
    var verticalStepSlider2 = document.getElementById("vertical-steps-2");
    noUiSlider.create(verticalStepSlider2, stepsOptions);
  
    var verticalStepSlider3 = document.getElementById("vertical-steps-3");
    noUiSlider.create(verticalStepSlider3, stepsOptions);
  
    var verticalStepSlider4 = document.getElementById("vertical-steps-4");
    noUiSlider.create(verticalStepSlider4, stepsOptions);
  
    var verticalStepSlider5 = document.getElementById("vertical-steps-5");
    noUiSlider.create(verticalStepSlider5, stepsOptions);
  
    // Extra large options
    var vertical_xl_options = {
      start: [45, 55],
      behaviour: "drag",
      connect: true,
      orientation: "vertical",
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var vertical_lg_options = {
      start: [40, 60],
      behaviour: "drag",
      connect: true,
      orientation: "vertical",
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var vertical_default_options = {
      start: [35, 65],
      behaviour: "drag",
      connect: true,
      orientation: "vertical",
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var vertical_sm_options = {
      start: [30, 70],
      behaviour: "drag",
      connect: true,
      orientation: "vertical",
      range: {
        min: 20,
        max: 80,
      },
    };
  
    var vertical_xs_options = {
      start: [25, 75],
      behaviour: "drag",
      connect: true,
      orientation: "vertical",
      range: {
        min: 20,
        max: 80,
      },
    };
  
    // Extra Large
    var vertExtraLargeSlider = document.getElementById("vert-extra-large-slider");
    var vertCircleExtraLargeSlider = document.getElementById(
      "vert-circle-extra-large-slider"
    );
    var vertSquareExtraLargeSlider = document.getElementById(
      "vert-square-extra-large-slider"
    );
  
    noUiSlider.create(vertExtraLargeSlider, vertical_xl_options);
    noUiSlider.create(vertCircleExtraLargeSlider, vertical_xl_options);
    noUiSlider.create(vertSquareExtraLargeSlider, vertical_xl_options);
  
    // Large
    var vertLargeSlider = document.getElementById("vert-large-slider");
    var vertCircleLargeSlider = document.getElementById(
      "vert-circle-large-slider"
    );
    var vertSquareLargeSlider = document.getElementById(
      "vert-square-large-slider"
    );
  
    noUiSlider.create(vertLargeSlider, vertical_lg_options);
    noUiSlider.create(vertCircleLargeSlider, vertical_lg_options);
    noUiSlider.create(vertSquareLargeSlider, vertical_lg_options);
  
    // Default
    var vertDefaultSlider = document.getElementById("vert-default-slider");
    var vertCircleDefaultSlider = document.getElementById(
      "vert-circle-default-slider"
    );
    var vertSquareDefaultSlider = document.getElementById(
      "vert-square-default-slider"
    );
  
    noUiSlider.create(vertDefaultSlider, vertical_default_options);
    noUiSlider.create(vertCircleDefaultSlider, vertical_default_options);
    noUiSlider.create(vertSquareDefaultSlider, vertical_default_options);
  
    // Small
    var vertSmallSlider = document.getElementById("vert-small-slider");
    var vertCircleSmallSlider = document.getElementById(
      "vert-circle-small-slider"
    );
    var vertSquareSmallSlider = document.getElementById(
      "vert-square-small-slider"
    );
  
    noUiSlider.create(vertSmallSlider, vertical_sm_options);
    noUiSlider.create(vertCircleSmallSlider, vertical_sm_options);
    noUiSlider.create(vertSquareSmallSlider, vertical_sm_options);
  
    // Extra Small
    var vertExtraSmallSlider = document.getElementById("vert-extra-small-slider");
    var vertCircleExtraSmallSlider = document.getElementById(
      "vert-circle-extra-small-slider"
    );
    var vertSquareExtraSmallSlider = document.getElementById(
      "vert-square-extra-small-slider"
    );
  
    noUiSlider.create(vertExtraSmallSlider, vertical_xs_options);
    noUiSlider.create(vertCircleExtraSmallSlider, vertical_xs_options);
    noUiSlider.create(vertSquareExtraSmallSlider, vertical_xs_options);
  });