Color Swatch and Price Filter not showing in magento 2.1.7

Question

I am new to Magento 2.1.7. following set to create the category product listing page.

1. Create the Root category and sub category In display setting Anchor value is Yes.
2. Than create the product attribute and assign to attribute set.In the each attribute I give the following options:

Use in Filter Options value is Yes.
Use in Search value is Yes.
Use in Layered Navigation value is Filterable (with results).
Use in Search Results Layered Navigation value is Yes.
Visible on Catalog Pages on Storefront value is Yes.
Used in Product Listing value is Yes.
Used for Sorting in Product Listing value is Yes.

3. Create the configurable product with select the option attribute set.
4. Then create the page to list the products.In that page

Design -> Layout is 2 columns with left bar
Design -> Layout Update XML

<referenceContainer name="sidebar.main">
<block class="Magento\LayeredNavigation\Block\Navigation\Category" name="catalog.leftnav" before="-" template="layer/view.phtml">
<block class="Magento\LayeredNavigation\Block\Navigation\State" name="catalog.navigation.state" as="state" />
<block class="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" name="catalog.navigation.renderer" as="renderer" template="layer/filter.phtml"/>
</block>
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" as="default"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
 name="category.product.addto.compare" as="compare"
 template="Magento_Catalog::product/list/addto/compare.phtml"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName">
<argument name="name" xsi:type="string">product_list_toolbar</argument>
</action>
</block>
</referenceContainer>

5. For Price Filter

   Stores -> Configuration -> Catalog -> Layered Navigation

Display Product Count value is yes
Price Navigation Step Calculation value is Manual
Default Price Navigation Step value is 0.5.
Maximum Number of Price Intervals value is 2

I have followed the all steps but the color swatch and price filter are not showing.In Product details page color swatch is showing.
Anyone helps me.

Answer 1

Color swatch not loading in the custom page which you have created, it may be css issue.

The basic swatch css should be loaded to display the swatch in the left navigation.

Magento_Swatches/css/swatches.css