Skip to content

Commit 64b8be3

Browse files
author
Federico Zivolo
committed
Added support for noUiSlider plugin.
1 parent 20fb271 commit 64b8be3

5 files changed

Lines changed: 437 additions & 1728 deletions

File tree

‎css-compiled/material.css‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1687,3 +1687,304 @@ fieldset[disabled] .navbar .btn-link:focus {
16871687
.snackbar.toast {
16881688
border-radius: 200px;
16891689
}
1690+
.noUi-target,
1691+
.noUi-target * {
1692+
-webkit-touch-callout: none;
1693+
-webkit-user-select: none;
1694+
-ms-touch-action: none;
1695+
-ms-user-select: none;
1696+
-moz-user-select: none;
1697+
-moz-box-sizing: border-box;
1698+
box-sizing: border-box;
1699+
}
1700+
.noUi-base {
1701+
width: 100%;
1702+
height: 100%;
1703+
position: relative;
1704+
}
1705+
.noUi-origin {
1706+
position: absolute;
1707+
right: 0;
1708+
top: 0;
1709+
left: 0;
1710+
bottom: 0;
1711+
}
1712+
.noUi-handle {
1713+
position: relative;
1714+
z-index: 1;
1715+
box-sizing: border-box;
1716+
-webkit-box-sizing: border-box;
1717+
}
1718+
.noUi-stacking .noUi-handle {
1719+
z-index: 10;
1720+
}
1721+
.noUi-stacking + .noUi-origin {
1722+
*z-index: -1;
1723+
}
1724+
.noUi-state-tap .noUi-origin {
1725+
-webkit-transition: left 0.3s, top 0.3s;
1726+
transition: left 0.3s, top 0.3s;
1727+
}
1728+
.noUi-state-drag * {
1729+
cursor: inherit !important;
1730+
}
1731+
.noUi-horizontal {
1732+
height: 10px;
1733+
}
1734+
.noUi-horizontal .noUi-handle {
1735+
box-sizing: border-box;
1736+
width: 12px;
1737+
height: 12px;
1738+
left: -10px;
1739+
top: -5px;
1740+
}
1741+
.noUi-horizontal.noUi-extended {
1742+
padding: 0 15px;
1743+
}
1744+
.noUi-horizontal.noUi-extended .noUi-origin {
1745+
right: -15px;
1746+
}
1747+
.noUi-background {
1748+
height: 2px;
1749+
margin: 20px 0;
1750+
}
1751+
.noUi-origin {
1752+
border-radius: 0;
1753+
height: 2px;
1754+
background: #c8c8c8;
1755+
}
1756+
.noUi-origin[style^="left: 0"] .noUi-handle {
1757+
background-color: #fff;
1758+
border: 2px solid #c8c8c8;
1759+
}
1760+
.noUi-origin[style^="left: 0"] .noUi-handle:active {
1761+
border-width: 1px;
1762+
}
1763+
.noUi-target {
1764+
border-radius: 2px;
1765+
}
1766+
.noUi-handle {
1767+
border-radius: 100%;
1768+
cursor: default;
1769+
transition: all 0.2s ease-out;
1770+
border: 1px solid;
1771+
}
1772+
.noUi-horizontal .noUi-handle:active {
1773+
transform: scale(2.5);
1774+
}
1775+
[disabled].noUi-slider {
1776+
opacity: 0.5;
1777+
}
1778+
[disabled] .noUi-handle {
1779+
cursor: not-allowed;
1780+
}
1781+
.slider .noUi-handle,
1782+
.slider-default .noUi-handle {
1783+
background-color: #4285f4;
1784+
}
1785+
.slider-primary .noUi-handle {
1786+
background-color: #4285f4;
1787+
}
1788+
.slider-success .noUi-handle {
1789+
background-color: #0f9d58;
1790+
}
1791+
.slider-info .noUi-handle {
1792+
background-color: #03a9f4;
1793+
}
1794+
.slider-warning .noUi-handle {
1795+
background-color: #ff5722;
1796+
}
1797+
.slider-danger .noUi-handle {
1798+
background-color: #f44336;
1799+
}
1800+
.slider-material-red .noUi-handle {
1801+
background-color: #f44336;
1802+
}
1803+
.slider-material-pink .noUi-handle {
1804+
background-color: #e91e63;
1805+
}
1806+
.slider-material-purple .noUi-handle {
1807+
background-color: #9c27b0;
1808+
}
1809+
.slider-material-deeppurple .noUi-handle {
1810+
background-color: #673ab7;
1811+
}
1812+
.slider-material-indigo .noUi-handle {
1813+
background-color: #3f51b5;
1814+
}
1815+
.slider-material-lightblue .noUi-handle {
1816+
background-color: #03a9f4;
1817+
}
1818+
.slider-material-cyan .noUi-handle {
1819+
background-color: #00bcd4;
1820+
}
1821+
.slider-material-teal .noUi-handle {
1822+
background-color: #009688;
1823+
}
1824+
.slider-material-lightgreen .noUi-handle {
1825+
background-color: #8bc34a;
1826+
}
1827+
.slider-material-lime .noUi-handle {
1828+
background-color: #cddc39;
1829+
}
1830+
.slider-material-lightyellow .noUi-handle {
1831+
background-color: #ffeb3b;
1832+
}
1833+
.slider-material-orange .noUi-handle {
1834+
background-color: #ff9800;
1835+
}
1836+
.slider-material-deeporange .noUi-handle {
1837+
background-color: #ff5722;
1838+
}
1839+
.slider-material-grey .noUi-handle {
1840+
background-color: #9e9e9e;
1841+
}
1842+
.slider-material-bluegrey .noUi-handle {
1843+
background-color: #607d8b;
1844+
}
1845+
.slider-material-brown .noUi-handle {
1846+
background-color: #795548;
1847+
}
1848+
.slider-material-lightgrey .noUi-handle {
1849+
background-color: #ececec;
1850+
}
1851+
.slider .noUi-handle,
1852+
.slider-default .noUi-handle {
1853+
border-color: #4285f4;
1854+
}
1855+
.slider-primary .noUi-handle {
1856+
border-color: #4285f4;
1857+
}
1858+
.slider-success .noUi-handle {
1859+
border-color: #0f9d58;
1860+
}
1861+
.slider-info .noUi-handle {
1862+
border-color: #03a9f4;
1863+
}
1864+
.slider-warning .noUi-handle {
1865+
border-color: #ff5722;
1866+
}
1867+
.slider-danger .noUi-handle {
1868+
border-color: #f44336;
1869+
}
1870+
.slider-material-red .noUi-handle {
1871+
border-color: #f44336;
1872+
}
1873+
.slider-material-pink .noUi-handle {
1874+
border-color: #e91e63;
1875+
}
1876+
.slider-material-purple .noUi-handle {
1877+
border-color: #9c27b0;
1878+
}
1879+
.slider-material-deeppurple .noUi-handle {
1880+
border-color: #673ab7;
1881+
}
1882+
.slider-material-indigo .noUi-handle {
1883+
border-color: #3f51b5;
1884+
}
1885+
.slider-material-lightblue .noUi-handle {
1886+
border-color: #03a9f4;
1887+
}
1888+
.slider-material-cyan .noUi-handle {
1889+
border-color: #00bcd4;
1890+
}
1891+
.slider-material-teal .noUi-handle {
1892+
border-color: #009688;
1893+
}
1894+
.slider-material-lightgreen .noUi-handle {
1895+
border-color: #8bc34a;
1896+
}
1897+
.slider-material-lime .noUi-handle {
1898+
border-color: #cddc39;
1899+
}
1900+
.slider-material-lightyellow .noUi-handle {
1901+
border-color: #ffeb3b;
1902+
}
1903+
.slider-material-orange .noUi-handle {
1904+
border-color: #ff9800;
1905+
}
1906+
.slider-material-deeporange .noUi-handle {
1907+
border-color: #ff5722;
1908+
}
1909+
.slider-material-grey .noUi-handle {
1910+
border-color: #9e9e9e;
1911+
}
1912+
.slider-material-bluegrey .noUi-handle {
1913+
border-color: #607d8b;
1914+
}
1915+
.slider-material-brown .noUi-handle {
1916+
border-color: #795548;
1917+
}
1918+
.slider-material-lightgrey .noUi-handle {
1919+
border-color: #ececec;
1920+
}
1921+
.slider,
1922+
.slider-default {
1923+
background-color: #4285f4;
1924+
}
1925+
.slider-primary {
1926+
background-color: #4285f4;
1927+
}
1928+
.slider-success {
1929+
background-color: #0f9d58;
1930+
}
1931+
.slider-info {
1932+
background-color: #03a9f4;
1933+
}
1934+
.slider-warning {
1935+
background-color: #ff5722;
1936+
}
1937+
.slider-danger {
1938+
background-color: #f44336;
1939+
}
1940+
.slider-material-red {
1941+
background-color: #f44336;
1942+
}
1943+
.slider-material-pink {
1944+
background-color: #e91e63;
1945+
}
1946+
.slider-material-purple {
1947+
background-color: #9c27b0;
1948+
}
1949+
.slider-material-deeppurple {
1950+
background-color: #673ab7;
1951+
}
1952+
.slider-material-indigo {
1953+
background-color: #3f51b5;
1954+
}
1955+
.slider-material-lightblue {
1956+
background-color: #03a9f4;
1957+
}
1958+
.slider-material-cyan {
1959+
background-color: #00bcd4;
1960+
}
1961+
.slider-material-teal {
1962+
background-color: #009688;
1963+
}
1964+
.slider-material-lightgreen {
1965+
background-color: #8bc34a;
1966+
}
1967+
.slider-material-lime {
1968+
background-color: #cddc39;
1969+
}
1970+
.slider-material-lightyellow {
1971+
background-color: #ffeb3b;
1972+
}
1973+
.slider-material-orange {
1974+
background-color: #ff9800;
1975+
}
1976+
.slider-material-deeporange {
1977+
background-color: #ff5722;
1978+
}
1979+
.slider-material-grey {
1980+
background-color: #9e9e9e;
1981+
}
1982+
.slider-material-bluegrey {
1983+
background-color: #607d8b;
1984+
}
1985+
.slider-material-brown {
1986+
background-color: #795548;
1987+
}
1988+
.slider-material-lightgrey {
1989+
background-color: #ececec;
1990+
}

‎demo/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1001,6 +1001,25 @@ <h3 id="progress-stacked">Stacked</h3>
10011001
</div>
10021002
</div>
10031003

1004+
<!-- Sliders (noUiSlider)
1005+
================================================== -->
1006+
1007+
<div class="bs-docs-section">
1008+
<div class="row">
1009+
<div class="col-lg-12">
1010+
<div class="page-header">
1011+
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
1012+
</div>
1013+
<div class="bs-component">
1014+
<div class="slider"></div>
1015+
<div class="slider slider-success"></div>
1016+
<div class="slider slider-material-pink"></div>
1017+
</div>
1018+
<p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p>
1019+
</div>
1020+
</div>
1021+
</div>
1022+
10041023
<!-- Containers
10051024
================================================== -->
10061025
<div class="bs-docs-section">
@@ -1324,5 +1343,19 @@ <h4 class="modal-title">Source Code</h4>
13241343
<script src="../scripts/ripples.js"></script>
13251344
<script src="../scripts/material.js"></script>
13261345
<script src="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.js"></script>
1346+
1347+
1348+
<script src="http://refreshless.com/nouislider/source/jquery.nouislider.min.js"></script>
1349+
<script>
1350+
$(function() {
1351+
$(".slider").noUiSlider({
1352+
start: 40,
1353+
range: {
1354+
min: 0,
1355+
max: 100
1356+
}
1357+
});
1358+
});
1359+
</script>
13271360
</body>
13281361
</html>

0 commit comments

Comments
 (0)